更新用户管理

src/components/svstem/svstemuser.vue

@@ -0,0 +1,143 @@
+<template>
+  <div id="svstemuser">
+    <el-row>
+      <el-col :span="24" class="top">
+        <top></top>
+      </el-col>
+      <el-col :span="24" class="logo">
+        <div class="w_1200">
+          <logo :info="info"></logo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <div class="w_1200">
+          <menuInfo></menuInfo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="5" class="fenlei">
+            <el-col :span="24" class="geren">
+              <geren></geren>
+            </el-col>
+            <el-col :span="24" class="diaocha">
+              <diaocha :diaochatitle="diaochatitle"></diaocha>
+            </el-col>
+          </el-col>
+          <el-col :span="19" class="right">
+            <right :shenheList="shenheList" :weishenheList="weishenheList"></right>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="foot">
+        <div class="w_1200">
+          <foot :info="info"></foot>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/index/top.vue';
+import logo from '@/layout/index/logo.vue';
+import menuInfo from '@/layout/index/menuInfo.vue';
+import foot from '@/layout/index/foot.vue';
+import geren from '@/layout/svstem/geren.vue';
+import diaocha from '@/layout/svstem/diaocha.vue';
+import right from '@/layout/svstem/right.vue';
+export default {
+  name: 'svstemuser',
+  props: {
+    info: null, //站点信息
+    shenheList: null,
+    weishenheList: null,
+    diaochatitle: null,
+  },
+  components: {
+    top, //头部
+    logo, //logo
+    menuInfo, //导航
+    foot, //底部
+    geren, //左边个人中心
+    right, //右边基本信息
+    diaocha, //左边网上调查
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 40px;
+  overflow: hidden;
+  background-color: rgba(11, 58, 125, 0.8);
+}
+.logo {
+  height: 200px;
+  overflow: hidden;
+}
+.menu {
+  height: 70px;
+  overflow: hidden;
+}
+
+.main {
+  min-height: 600px;
+  overflow: hidden;
+  margin: 10px 0;
+}
+.main .fenlei {
+  float: left;
+  width: 240px;
+  min-height: 850px;
+  margin: 0 10px 0 0;
+  overflow: hidden;
+}
+.geren {
+  float: left;
+  width: 240px;
+  min-height: 360px;
+  // margin: 0 10px 0 0;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+
+.diaocha {
+  float: left;
+  width: 240px;
+  min-height: 530px;
+  margin: 10px 0 0 0;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+
+.main .right {
+  float: left;
+  width: 950px;
+  min-height: 900px;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.main .link {
+  float: left;
+  width: 100%;
+  height: 100px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.foot {
+  float: left;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+}
+</style>

src/layout/svstem/right.vue

@@ -0,0 +1,202 @@
+<template>
+  <div id="right">
+    <el-col :span="24" class="rightTop"
+      ><span class="title">{{ title }}</span></el-col
+    >
+    <el-col :span="24" class="context">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="待审用户" name="first">
+          <el-col :span="24" class="list">
+            <el-col :span="24" class="daishenuser" v-for="(item, index) in shenheList" :key="index">
+              <el-col :span="24" class="fbListTop">
+                <el-col :span="20">登录名称 {{ item.name }}</el-col>
+                <el-col :span="4">{{ item.date }}</el-col>
+              </el-col>
+              <el-col :span="24" class="fbListCenter">
+                <el-col :span="6" class="fbListCenterC">
+                  <el-col :span="24" class="listname"> {{ item.name }}</el-col>
+                  <el-col :span="24" class="listtype"> 类别:{{ item.type }}</el-col>
+                  <el-col :span="24" class="listphone"> 电话：{{ item.phone }}</el-col>
+                </el-col>
+                <el-col :span="18" class="fbListCenterR"
+                  ><span>{{ item.user }}</span></el-col
+                >
+              </el-col>
+            </el-col>
+          </el-col>
+          <el-col class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total,  prev, pager, next, jumper"
+              :total="1"
+            >
+            </el-pagination>
+          </el-col>
+        </el-tab-pane>
+        <el-tab-pane label="已审用户" name="second">
+          <el-col :span="24" class="list">
+            <el-col :span="24" class="daishenuser" v-for="(item, index) in weishenheList" :key="index">
+              <el-col :span="24" class="fbListTop">
+                <el-col :span="20">登录名称 {{ item.name }}</el-col>
+                <el-col :span="4">{{ item.date }}</el-col>
+              </el-col>
+              <el-col :span="24" class="fbListCenter">
+                <el-col :span="6" class="fbListCenterC">
+                  <el-col :span="24" class="listname"> {{ item.name }}</el-col>
+                  <el-col :span="24" class="listtype"> 类别:{{ item.type }}</el-col>
+                  <el-col :span="24" class="listphone"> 电话：{{ item.phone }}</el-col>
+                </el-col>
+                <el-col :span="18" class="fbListCenterR"
+                  ><span>{{ item.user }}</span></el-col
+                >
+              </el-col>
+            </el-col>
+          </el-col>
+          <el-col class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total,  prev, pager, next, jumper"
+              :total="1"
+            >
+            </el-pagination>
+          </el-col>
+        </el-tab-pane>
+      </el-tabs>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'right',
+  props: {
+    shenheList: null,
+    weishenheList: null,
+  },
+  components: {},
+  data: () => ({
+    title: '用户列表',
+    activeName: 'first',
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.rightTop {
+  height: 60px;
+
+  line-height: 60px;
+  border-bottom: 1px solid #215299;
+}
+
+.rightTop .title {
+  width: 130px;
+  height: 60px;
+  float: left;
+  color: rgb(255, 255, 255);
+  font-size: 18px;
+  text-align: center;
+  font-family: 微软雅黑, Tahoma, Arial, Helvetica, STHeiti;
+  background: rgb(33, 82, 153);
+}
+.context {
+  margin: 20px 30px 0 30px;
+  width: 890px;
+}
+
+.list {
+  height: 660px;
+}
+.daishenuser {
+  width: 890px;
+  height: 145px;
+  border: 1px solid #ccc;
+  margin-top: 20px;
+}
+.fbListTop {
+  height: 43px;
+  margin-left: 1px;
+  background: #fafafa;
+  line-height: 43px;
+  text-indent: 10px;
+  font-size: 13px;
+  color: #888888;
+  width: 887px;
+}
+.fbListCenter {
+  width: 870px;
+  height: 119px;
+  margin: 20px 0 0 12px;
+}
+.fbListCenterC {
+  width: 196px;
+  border-right: 1px solid #ccc;
+  float: left;
+  padding-right: 20px;
+  height: 70px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.fbListCenterR {
+  border-left: 1px solid #ccc;
+  width: 125px;
+  height: 70px;
+  float: left;
+}
+.fbListCenterR span {
+  margin-left: 20px;
+  font-size: 14px;
+  color: #215299;
+  float: left;
+  cursor: pointer;
+}
+.listName {
+  width: 196px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 30px;
+  font-size: 16px;
+  color: #555555;
+}
+.listtype {
+  width: 196px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 16px;
+  color: #555555;
+  height: 30p;
+}
+.listphone {
+  height: 30px;
+  font-size: 16px;
+  color: #fe0000;
+  width: 196px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.page {
+  margin: 30px 0 0 0;
+  text-align: center;
+}
+</style>

src/router/index.js

@@ -110,11 +110,18 @@ const routes = [
     name: 'guidance',
     component: () => import('../views/personnel/guidance.vue'),
   },
+  //个人中心-基本信息
   {
     path: '/svstem/svstem',
     name: 'svstem',
     component: () => import('../views/svstem/svstem.vue'),
   },
+  //个人中心-用户管理
+  {
+    path: '/svstem/svstemuser',
+    name: 'svstemuser',
+    component: () => import('../views/svstem/svstemuser.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/svstem/svstemuser.vue

@@ -0,0 +1,105 @@
+<template>
+  <div id="svstemuser">
+    <svstemuser-detail :info="info" :shenheList="shenheList" :weishenheList="weishenheList" :diaochatitle="diaochatitle"></svstemuser-detail>
+  </div>
+</template>
+
+<script>
+import svstemuserDetail from '@/components/svstem/svstemuser.vue';
+export default {
+  name: 'svstemuser',
+  props: {},
+  components: {
+    svstemuserDetail,
+  },
+  data: () => ({
+    info: {
+      logo: require('@/assets/logo.png'),
+      banquan: '版权所有：吉林省计算中心',
+      jishu: '技术支持：长春市福瑞科技有限公司',
+      youbian: '邮编：130000',
+      chuanzhen: '传真：239823982',
+      address: '地址：吉林省长春市朝阳区前进大街1244号',
+      phone: '电话：0431-1234567',
+      email: '邮箱：123456@163.com',
+    },
+
+    shenheList: [
+      {
+        name: 'qqq',
+        date: '2018-04-5 09:35',
+        type: '法人',
+        phone: '1',
+        user: '审核用户',
+      },
+      {
+        name: 'qqq',
+        date: '2018-04-5 09:35',
+        type: '法人',
+        phone: '1',
+        user: '审核用户',
+      },
+      {
+        name: 'qqq',
+        date: '2018-04-5 09:35',
+        type: '法人',
+        phone: '1',
+        user: '审核用户',
+      },
+      {
+        name: 'qqq',
+        date: '2018-04-5 09:35',
+        type: '法人',
+        phone: '1',
+        user: '审核用户',
+      },
+    ],
+    weishenheList: [
+      {
+        name: 'qqq',
+        date: '2018-04-5 09:35',
+        type: '法人',
+        phone: '1',
+        user: '查看详情',
+      },
+      {
+        name: 'qqq',
+        date: '2018-04-5 09:35',
+        type: '法人',
+        phone: '1',
+        user: '查看详情',
+      },
+      {
+        name: 'qqq',
+        date: '2018-04-5 09:35',
+        type: '法人',
+        phone: '1',
+        user: '查看详情',
+      },
+      {
+        name: 'qqq',
+        date: '2018-04-5 09:35',
+        type: '法人',
+        phone: '1',
+        user: '查看详情',
+      },
+    ],
+    diaochatitle: [
+      {
+        context: '您是否愿意继续关注本平台',
+      },
+      {
+        context: '您是否愿意继续关注本平台',
+      },
+      {
+        context: '您是否愿意继续关注本平台',
+      },
+    ],
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>