用户和音乐下拉框切换

.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 音乐公路管理系统
 
 # 开发环境配置
 ENV = 'development'

.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 音乐公路管理系统
 
 # 生产环境配置
 ENV = 'production'

.env.staging

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 音乐公路管理系统
 
 NODE_ENV = production
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ruoyi",
   "version": "3.8.1",
-  "description": "若依管理系统",
+  "description": "音乐公路管理系统",
   "author": "若依",
   "license": "MIT",
   "scripts": {
@@ -40,7 +40,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.19.1",
-    "echarts": "4.9.0",
+    "echarts": "^4.9.0",
     "element-ui": "2.15.6",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

src/carEcharts.js

@@ -1,74 +0,0 @@
-var chartDom = document.getElementById('carEcharts');
-var myChart = echarts.init(chartDom);
-var option = {
-color: ["#2f89cf"],
-  title: {
-    text: '车辆来源地',
-    textStyle: {
-        color: "rgba(66,232,224)",
-        fontSize: "14"
-      }
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'shadow'
-    }
-  },
-  legend: {},
-  grid: {
-    left: '7%',
-    right: '7%',
-    bottom: '5%',
-    top:"9%",
-    containLabel:false,
-  },
-  xAxis: {
-    show:false,
-    type: 'value',
-    axisLine: {
-      show: false
-    },
-    splitLine:{show: false},
-    axisTick: {
-      show: false,
-  },
-  },
-  yAxis: {
-    type: 'category',
-    data: ['江苏', '山东', '北京', '河北', '河南', '山西'],
-    axisLabel: {
-        textStyle: {
-          color: "white",
-          fontSize: "14"
-        }
-      },
-      axisLine: {
-        show: false
-      },
-      axisTick: {
-        show: false
-    },
-      splitLine:{show: false},
-  },
-  series: [
-    {
-      name: '',
-      type: 'bar',
-      data: [19, 29, 39, 44, 49, 69],
-      barWidth: "25%",
-      label:{
-      show:true,
-      position:"right",
-      },
-      itemStyle: {
-        barBorderRadius: 5
-      }
-    }
-  ]
-};
-// 把配置给实例对象
-myChart.setOption(option);
-window.addEventListener("resize", function() {
-  myChart.resize();
-});

src/layout/components/CarMsg/index.vue

@@ -26,27 +26,97 @@
     <div id="carEcharts"></div>
     <div class="panel-footer"></div>
   </div>
-
-
 </template>
 
 <script>
 import flexible from "@/layout/flexible.js";
-export default{
-methods: {
-    
+export default {
+  mounted() {
+    var echarts = require("echarts");
+    var chartDom = document.getElementById("carEcharts");
+    var myChart = echarts.init(chartDom);
+    var option = {
+      color: ["#2f89cf"],
+      title: {
+        text: "车辆来源地",
+        textStyle: {
+          color: "rgba(66,232,224)",
+          fontSize: "14"
+        }
       },
-data(){
-  return{
-
-
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow"
+        }
+      },
+      legend: {},
+      grid: {
+        left: "7%",
+        right: "7%",
+        bottom: "5%",
+        top: "9%",
+        containLabel: false
+      },
+      xAxis: {
+        show: false,
+        type: "value",
+        axisLine: {
+          show: false
+        },
+        splitLine: { show: false },
+        axisTick: {
+          show: false
+        }
+      },
+      yAxis: {
+        type: "category",
+        data: ["江苏", "山东", "北京", "河北", "河南", "山西"],
+        axisLabel: {
+          textStyle: {
+            color: "white",
+            fontSize: "14"
+          }
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: { show: false }
+      },
+      series: [
+        {
+          name: "",
+          type: "bar",
+          data: [19, 29, 39, 44, 49, 69],
+          barWidth: "25%",
+          label: {
+            show: true,
+            position: "right"
+          },
+          itemStyle: {
+            barBorderRadius: 5
           }
         }
+      ]
+    };
+    // 把配置给实例对象
+    myChart.setOption(option);
+    window.addEventListener("resize", function() {
+      myChart.resize();
+    });
+  },
 
 
-}
-</script>
-<style >
 
   
+  methods: {},
+  data() {
+    return {};
+  }
+};
+</script>
+<style >
 </style>

src/layout/components/Device/index.vue

@@ -3,37 +3,224 @@
     <div class="titleBg">
       <h2>设备管理</h2>
     </div>
-        <div class="chart"></div>
-        <div class="panel-footer"></div>
+    <div class="buttonBox">
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="editDevice">新增</el-button>
+      <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice">删除</el-button>
     </div>
-</template>
-
-<script>
- import flexible from "@/layout/flexible.js";
-
-export default{
-
-methods: {
-    
-  },
-data(){
-  return{
-
 
+    <div id="deviceBox">
+      <div class="deviceMsg" v-for="i in 150" :key="i">
+        <el-popover placement="right" width="250" trigger="click">
+          <el-row>
+            <el-col :span="24">
+              <div class="iconBox">
+                <img src="../../../assets/images/位置.png" class="iconImg" alt />
+              </div>
+              <span class="span1 span2">位置</span>
+              <span class="span1 span3">001</span>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <div class="iconBox">
+                <img src="../../../assets/images/网络.png" class="iconImg" alt />
+              </div>
+              <span class="span1 span4">IP地址</span>
+              <span class="span1 span5">192.168.88.88</span>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <div class="iconBox">
+                <img src="../../../assets/images/音符.png" class="iconImg" alt />
+              </div>
+              <span class="span1 span2">音符</span>
+              <span class="span1 span3">1</span>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <div class="iconBox">
+                <img src="../../../assets/images/音量.png" class="iconImg" alt />
+              </div>
+              <span class="span1 span2">音量</span>
+              <span class="span1 span3">50%</span>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <div class="iconBox">
+                <img src="../../../assets/images/设置.png" class="iconImg" alt />
+              </div>
+              <span class="span1">设备状态</span>
+              <span class="span1">正常</span>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <div class="iconBox">
+                <img src="../../../assets/images/时间.png" class="iconImg" alt />
+              </div>
+              <span class="span1">创建时间</span>
+              <span class="span1">2022.02.22</span>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <div class="iconBox">
+                <img src="../../../assets/images/创建人.png" class="iconImg" alt />
+              </div>
+              <span class="span1 span6">创建人</span>
+              <span class="span1 span7">张大大</span>
+            </el-col>
+          </el-row>
 
+          <div class="shadows" slot="reference"></div>
+        </el-popover>
 
+        <div class="deleteIcon">
+          <img src="../../../assets/images/删除.png" class="deleteImg" alt />
+        </div>
+        <span class="deviceStatus">正常</span>
+        <span class="deviceNumber">{{i}}</span>
 
+        <img src="../../../assets/images/喇叭.png" class="deviceImg" alt />
+      </div>
+    </div>
+    <div class="panel-footer"></div>
+  </div>
+</template>
 
+<script>
+import flexible from "@/layout/flexible.js";
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    //新增按钮
+    editDevice() {},
+    //删除按钮
+    deleteDevice() {}
   }
-  }
-
-
-
-
-
-
-}
+};
 </script>
-<style >
+<style scoped>
+.el-row {
+  margin-bottom: 10px;
+  display: flex;
+}
+.span1 {
+  display: inline-block;
+  margin-left: 20px;
+}
+.span2 {
+  letter-spacing: 27px;
+}
+.span3 {
+  display: inline-block;
+  margin-left: -8px;
+}
+.span4 {
+  letter-spacing: 5px;
+}
+.span5 {
+  display: inline-block;
+  margin-left: 11px;
+}
+.span6 {
+  letter-spacing: 7px;
+}
+.span7 {
+  display: inline-block;
+  margin-left: 14px;
+}
+.iconBox {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
  
+  margin-right: -15px;
+}
+.iconImg {
+  width: 100%;
+  height: 100%;
+  margin-top: 5px;
+}
+.buttonBox {
+  width: 100%;
+  margin-top: 0.125rem;
+}
+#deviceBox {
+  margin-top: 0.17rem;
+  margin-left: 0rem;
+  margin-right: -0.125rem;
+  margin-bottom: 0rem;
+  height: 4rem;
+  overflow: auto;
+}
+.deviceMsg {
+  margin-left: 0rem;
+  margin-top: 0rem;
+  margin-right: 0.125rem;
+  margin-bottom: 0.17rem;
+  width: 79px;
+  height: 90px;
+  float: left;
+  position: relative;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+::-webkit-scrollbar {
+  width: 7px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 14px;
+  background: #4a6cd5;
+}
+::-webkit-scrollbar-track {
+  border-radius: 0;
+  background: none;
+}
+.shadows {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 79px;
+  height: 90px;
+  cursor: pointer;
+  /* background:grey; 
+  opacity: 0.4; */
+}
+.deviceStatus {
+  color: white;
+  font-size: 12px;
+  text-align: center;
+  display: block;
+  margin-top: 5px;
+}
+.deviceNumber {
+  font-size: 12px;
+  color: white;
+  position: relative;
+  top: 20%;
+  left: 40%;
+  display: block;
+}
+.deviceImg {
+  margin: -7px auto;
+  width: 34px;
+  height: 55px;
+  display: block;
+  cursor: pointer;
+}
+.deleteIcon {
+  width: 8px;
+  position: absolute;
+  top: 2px;
+  right: 5px;
+  cursor: pointer;
+}
+.deleteImg {
+  width: 100%;
+}
 </style>

src/layout/components/MusicManage/index.vue

@@ -1,13 +1,39 @@
 <template>
   <div class="panel bar1">
     <div class="titleBg">
-          <h2>音乐管理</h2>
+      <h2>
+        <el-form
+          :inline="true"
+          :model="queryParams"
+          ref="queryForm"
+          label-width="1.7rem"
+        >
+          <el-form-item label prop="musicManage">
+            <el-select
+              class="selectNav"
+              v-model="queryParams.musicManage"
+              placeholder="音乐管理"
+              size="small"
+              style="width:3.2rem"
+              @change="pageShow"
+            >
+              <el-option
+                v-for="dict in musicManageArr"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+                @change="pageShow"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </h2>
     </div>
-
-        <div class="musicManagement">
+  <!-- 音乐管理表格数据 -->
+    <div class="musicManagement" v-show="musicShow">
       <el-table :data="musicManagementList" style="width: 100%">
         <el-table-column prop="location" label="位置" width="50" height="25" align="center"></el-table-column>
-            <el-table-column prop="ipAddress" label="ip地址" height="25" align="center"></el-table-column>
+        <el-table-column prop="ipAddress" label="IP地址" height="25" align="center"></el-table-column>
         <el-table-column prop="deviceState" label="设备状态" height="25" width="80" align="center"></el-table-column>
         <el-table-column prop="note" label="音符" width="50" height="25" align="center"></el-table-column>
         <el-table-column prop="volume" label="音量" width="50" height="25" align="center"></el-table-column>
@@ -25,27 +51,35 @@
               size="mini"
               icon="el-icon-delete"
               type="danger"
-                  @click="deleteMusic(scope.row)"
+              @click="deleteMusic(scope.$index, musicManagementList)"
             >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
-        <div class="panel-footer"></div>
+    <!-- 用户管理 -->
+     <div class="userManagement" v-show="userShow">
+
     </div> 
+    <div class="panel-footer"></div>
 
     
+    <!-- <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+    />-->
+  </div>
 </template>
 
 <script>
- import flexible from "@/layout/flexible.js";
+import flexible from "@/layout/flexible.js";
 
-export default{
-methods: {
-    
-  },
-data(){
-  return{
+export default {
+  data() {
+    return {
       musicManagementList: [
         {
           location: "001",
@@ -57,40 +91,109 @@ data(){
           createBy: "张大大"
         },
         {
-          location: "001",
+          location: "002",
           ipAddress: "192.168.10.88",
           deviceState: "正常",
           note: "",
-          volume: "50%",
+          volume: "40%",
           createTime: "2022-02-02",
-          createBy: "张大大"
+          createBy: "张小小"
         },
         {
-          location: "001",
+          location: "003",
           ipAddress: "192.168.10.88",
           deviceState: "正常",
           note: "",
-          volume: "50%",
+          volume: "30%",
           createTime: "2022-02-02",
-          createBy: "张大大"
+          createBy: "王小二"
         }
-      ]
-
+      ],
+      musicManageArr: [
+        { 
           
+          value: 1,
+          label: "音乐管理"
+        },
+        {
           
+          value: 2,
+          label: "用户管理"
+        }
+      ],
+      // 音乐管理显示隐藏
+      musicShow:true,
+      // 用户管理显示隐藏
+      userShow:false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 7,
+        musicManage: undefined,
       
+      }
+    };
+  },
 
+  methods: {
+    // 下拉菜单页面切换
+    pageShow(e){
+      console.log(e,8888888888888)
+      if(e==2){
+         this.musicShow=false;
+         this.userShow=true;
       }
+      else{
+         this.musicShow=true;
+         this.userShow=false;
       }
-
-
-
-
-
-
-
-}
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+    },
+    //确定按钮
+    submitForm() {},
+
+    //删除按钮操作
+    deleteMusic(index, musicManagementList) {
+      this.$modal
+        .confirm("确认要删除吗")
+        .then(function() {
+          musicManagementList.splice(index, 1);
+        })
+        .then(() => {
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    }
+  }
+};
 </script>
-<style >
-
+<style scoped>
+.userManagement{
+  margin: 0.125rem 0 0.125rem;
+  border:1px solid rgba(25, 186, 139, 0.17);
+  height: 3rem;
+}
+ ::v-deep .el-input {
+  margin-left: 6px !important;
+}
+ ::v-deep .el-input__suffix {
+  right: 0.8rem !important;
+}
+ ::v-deep .el-input--small {
+  font-size: 0.25rem !important;
+  color: white !important;
+}
+ ::v-deep .el-input__inner {
+  background: transparent !important;
+  border: none !important;
+  color: white !important;
+  text-align: center !important;
+  letter-spacing: 4px !important;
+} 
+::v-deep input::-webkit-input-placeholder {
+  color: white !important ;
+}
 </style>

src/layout/components/TrackManagement/index.vue

@@ -26,7 +26,7 @@
               size="mini"
               icon="el-icon-delete"
               type="danger"
-                  @click="deleteSong(scope.row)"
+              @click="deleteSong(scope.$index,songList)"
             >删除</el-button>
           </template>
         </el-table-column>
@@ -34,21 +34,23 @@
     </div>
     <div class="waveBox"></div>
     <div class="panel-footer"></div>
-      </div>
-
 
+    <el-dialog title="系统提示" :visible.sync="open" width="300px" style="background:#111658,color:white">
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="mini" @click="submitForm">确定</el-button>
+        <el-button type="primarys" size="mini" @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
- import flexible from "@/layout/flexible.js";
-
-export default{
+import flexible from "@/layout/flexible.js";
 
-methods: {
+export default {
   
-  },
-data(){
-  return{
+data() {
+    return {
       songList: [
         {
           songName: "门没锁"
@@ -64,19 +66,43 @@ data(){
         }
       ],
 
+      // 是否显示弹出层
+      open: false,
+    };
+  },
 
+  methods: {
     
+  // 取消按钮
+    cancel() {
+    this.open = false;
+    },
+   //确定按钮 
+    submitForm() {
       
-
-    }
-  }
-
-
-
-
-
+    },
+    //删除按钮操作
+   deleteSong(index,songList){
+     this.$modal.confirm('确认要删除吗')
+     .then(function() {
+        songList.splice(index, 1);
+      })
+      .then(() => {
+        this.$modal.msgSuccess( "删除成功");
+      })
+      .catch(() => {
+       this.open = false;
+      })
+  },
+  },
 
 }
 </script>
-<style >
+<style scoped>
+.el-button--primarys {
+  background: #3835a0 !important;
+  color: white !important;
+  border: none !important;
+  /* padding: 0.06rem; */
+}
 </style>

src/layout/components/Vedio/index.vue

@@ -8,7 +8,6 @@
         <div class="panel-footer"></div>
   </div>
 
-
 </template>
 
 <script>

src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="app-container home">
+<div class="app-container home">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,25 +9,27 @@
   </header>
   <div class="mainbox">
     <div class="row1">
-    <vedio/>
-    <car-msg/>
-    <track-management/>
+      <vedio />
+      <car-msg />
+      <track-management />
     </div>
     <div class="row2">
-    <music-manage/>
-    <device/>
-
+      <music-manage />
+      <device />
     </div>
   </div>
 </div>
 </template>
 
 <script>
-import {Vedio,CarMsg,TrackManagement,MusicManage,Device} from "./components";
+import {
+  Vedio,
+  CarMsg,
+  TrackManagement,
+  MusicManage,
+  Device
+} from "./components";
 import flexible from "@/layout/flexible.js";
-// import jquery from "@../jquery.js";
-// import echarts from "@../echarts.min.js";
-// import index from "@/assets/styles/index.css";
 export default {
   name: "Layout",
   components: {
@@ -35,20 +37,16 @@ export default {
     CarMsg,
     TrackManagement,
     MusicManage,
-    Device,
+    Device
   },
   methods: {},
-   data(){
-     return{
-
+  data() {
+    return {};
   }
-   },
-
-}
+};
 </script>
 
 <style  >
- 
 * {
   margin: 0;
   padding: 0;
@@ -120,53 +118,77 @@ li {
   margin-top: 0.15rem;
 }
 /* // 曲目管理 */
+.el-message-box {
+  background-color: #111658 !important;
+  border: 1px solid gray;
+}
+.el-message-box__title {
+  color: white;
+}
+.el-message-box__content {
+  color: white;
+}
+.el-button--small {
+  background: #3835a0;
+  color: white;
+  border: none;
+}
+.el-button--small:hover {
+  background: #3835a0;
+  color: white;
+}
 .trackManagement {
   width: 7.2rem;
-  height: 2.86rem;
+  height: 2.56rem;
   margin-top: 0.125rem;
 }
 .el-button--primary {
-  /* background: #1C257F !important; */
   background: #3835a0 !important;
   color: white !important;
   border: none !important;
-  padding: 4px;
 }
 .el-button--danger {
   background: #bf3d4a !important;
   color: white !important;
   border: none !important;
-  padding: 4px;
 }
 .waveBox {
   width: 7.2rem;
-  height: 1.12rem;
+  height: 1.42rem;
   margin-top: 0.127rem;
   border: 1px solid rgba(25, 186, 139, 0.17);
 }
-::v-deep .el-table tbody tr:hover > td {
-  background-color: #121961 !important;
-}
-.el-table--enable-row-transition {
-  background-color: #121961 !important;
-}
-.cell-border {
-  border-bottom: 1px solid rgba(25, 186, 139, 0.17) !important;
-}
 .musicManagement {
   margin: 0.125rem 0 0.125rem;
 }
-::v-deep.el-table tr {
+
+.el-table,
+.el-table__expanded-cell {
   background: #121961 !important;
   color: white !important;
 }
-::v-deep.el-table th {
+
+.el-table th,
+.el-table tr,
+.el-table td {
+  background: #121961 !important;
+  color: white !important;
+  border-bottom: 1px solid rgba(25, 186, 139, 0.17) !important;
+}
+.el-table th {
   background: #1c257f !important;
   color: white !important;
 }
-/* .el-table .el-table--medium .el-table__cell{
-  padding:2px 0 !important;
-} */
+.el-table__body tr,
+.el-table__body th,
+.el-table__body td {
+  padding: 0;
+  height: 0.2rem !important;
+}
+
+.el-table__cell {
+  padding: 0.08rem 0 !important;
+}
 
 #carEcharts {
   width: 7.2rem;
@@ -204,18 +226,19 @@ header h1 {
 }
 .mainbox .row1 .panel {
   flex: 50%;
-  margin: 0 0.125rem 0.1875rem;
+  margin: 0.125rem 0.125rem 0.125rem;
+}
+.line1 {
+  overflow: hidden;
 }
 .mainbox .row2 .panel {
   flex: 50%;
-  margin: 0 0.125rem 0.125rem;
+  margin: 0.125rem 0.125rem 0.125rem;
 }
 .panel {
   position: relative;
   height: 5rem;
   border: 1px solid rgba(25, 186, 139, 0.17);
-
-  /*  */
   background-color: rgba(17, 22, 88);
   padding: 0 0.1875rem 0.5rem;
   margin-bottom: 0.1875rem;
@@ -273,7 +296,8 @@ header h1 {
   text-align: center;
   color: #fff;
   font-size: 0.25rem;
-  font-weight: 400;
+  font-weight: 500;
+  letter-spacing: 4px;
 }
 .panel h2 a {
   margin: 0 0.1875rem;
@@ -281,6 +305,43 @@ header h1 {
   text-decoration: underline;
 }
 
-
-
+.el-table::before {
+  background-color: rgba(25, 186, 139, 0.17) !important;
+}
+/*   音乐管理 */
+.el-select-dropdown__item {
+  color: white;
+  text-align: center;
+  letter-spacing: 4px;
+}
+.el-select-dropdown__item.hover {
+  background-color: #37339d;
+}
+.el-select-dropdown__item.selected {
+  color: white;
+}
+.el-form-item--medium .el-form-item__content {
+  line-height: 0.6rem ;
+}
+.el-select-dropdown {
+  background: #37339d;
+  border: none;
+  color: white;
+}
+.el-popper[x-placement^="bottom"] .popper__arrow::after {
+  border-bottom-color: #37339d;
+}
+.el-popper[x-placement^="bottom"] .popper__arrow {
+  border-bottom-color: #37339d;
+  left: 1.6rem !important;
+}
+/*   设备管理*/
+.el-popover {
+  background: #111658 !important;
+  color: white;
+  border: 1px solid gray;
+}
+.popper__arrow::after {
+  border-right-color: #111658 !important;
+}
 </style>

src/views/login.vue

@@ -158,7 +158,7 @@ export default {
   }
 };
 </script>
-<style rel="stylesheet/scss" lang="scss" >
+<style rel="stylesheet/scss" lang="scss">
 textarea::-webkit-input-placeholder {
     color: white ;
   }

src/views/register.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="register">
     <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">若依后台管理系统</h3>
+      <h3 class="title">音乐公路后台管理系统</h3>
       <el-form-item prop="username">
         <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />

vue.config.js

@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || '电子音乐管理系统' // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口
 
@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.31.98:8080`,
+        target: `http://192.168.31.99:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''