优化用户中心界面与数据展示

src/views/useCenter.vue

@@ -47,62 +47,40 @@
         </div>
       </div>
       <!--弹框演示模板 结束-->
-
-
-      <!-- 地图 -->
-      <supermap ref="supermap" style="width: 100%;height: 100vh;">
-      </supermap>
     </div>
     <div class="con_right">
       <div class="list_tit">用户列表</div>
-      <el-select v-model="value" placeholder="请选择">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-      <el-input
-        placeholder="请输入用户姓名"
-        suffix-icon="el-icon-search"
-        v-model="input1">
-      </el-input>
+      <div style="display: flex; gap: 10px;">
+        <el-select v-model="value" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <el-input
+          placeholder="请输入用户姓名"
+          suffix-icon="el-icon-search"
+          v-model="input1">
+          style="flex: 1;">
+        </el-input>
+      </div>
+
       <dl class="sp_list">
-        <dt><span class="dt1">序号</span><span class="dt2">用户</span><span class="dt3">定位</span></dt>
+        <dt><span class="dt1">序号</span><span class="dt2">用户</span><span class="dt3" style="width: 80px">手机号码</span></dt>
         <div class="hei_scroll hei56">
-          <dd><span class="dt1">0101</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0102</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0103</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0104</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0105</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0101</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0102</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0103</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0104</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0105</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0102</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0103</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-          <dd><span class="dt1">0104</span><span class="dt2">王大力</span><span class="dt3"><img
-            src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+          <dd v-for="(e,idx) in userListSearch" :key="idx">
+            <span class="dt1">{{ idx + 1 }}</span>
+            <span class="dt2">{{ e.name }}</span>
+            <span class="dt2">{{ e.number }}</span>
+          </dd>
         </div>
       </dl>
       <el-pagination
         background
         layout="prev, pager, next"
-        :total="100">
+        :total="10">
       </el-pagination>
     </div>
   </div>
@@ -110,7 +88,6 @@
 
 <script>
 import Cookies from 'js-cookie'
-import supermap from '@/components/supermap-2.5d' //超图
 import {getUserProfile} from "@/api/system/user";
 
 import '../assets/styles/hz_body.css';
@@ -124,7 +101,6 @@ let echarts = require("echarts");
 export default {
   name: 'MyChart',
   components: {
-    supermap,
   },
   metaInfo() {
     return {
@@ -173,6 +149,28 @@ export default {
           value: '选项5',
           label: '华生5'
         }],
+      userListSearch:[
+        {name:'张利',number:'15602523655'},
+        {name:'李明',number:'13812345678'},
+        {name:'王芳',number:'13923456789'},
+        {name:'刘洋',number:'13734567890'},
+        {name:'陈静',number:'13645678901'},
+        {name:'杨帆',number:'13556789012'},
+        {name:'赵敏',number:'13467890123'},
+        {name:'黄勇',number:'13378901234'},
+        {name:'周杰',number:'13289012345'},
+        {name:'吴娜',number:'13190123456'},
+        {name:'徐强',number:'13001234567'},
+        {name:'孙丽',number:'18912345678'},
+        {name:'马超',number:'18823456789'},
+        {name:'朱琳',number:'18734567890'},
+        {name:'胡斌',number:'18645678901'},
+        {name:'林涛',number:'18556789012'},
+        {name:'何敏',number:'18467890123'},
+        {name:'郭伟',number:'18378901234'},
+        {name:'罗娜',number:'18289012345'},
+        {name:'高飞',number:'18190123456'}
+      ],
       value: '',
       /** 用户数量信息 **/
       totalUsers:0,