个人中心-基本信息更新

src/components/personCenter/user.vue

@@ -0,0 +1,125 @@
+<template>
+  <div id="user">
+    <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="left">
+            <el-col :span="24" class="fenlei">
+              <fenlei></fenlei>
+            </el-col>
+            <el-col :span="24" class="question">
+              <question></question>
+            </el-col>
+          </el-col>
+          <el-col :span="19" class="right">
+            <span v-if="type === 'basic'">
+              <basic :basicInfo="basicInfo"></basic>
+            </span>
+            <span v-else>
+              不知道
+            </span>
+          </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 fenlei from '@/layout/personCenter/fenlei.vue';
+import question from '@/layout/personCenter/question.vue';
+import basic from '@/layout/personCenter/basic.vue';
+
+import foot from '@/layout/index/foot.vue';
+export default {
+  name: 'user',
+  props: {
+    info: null, //站点信息
+    type: null, //同一框架，不同类型引用不同组件
+    basicInfo: null, //基本信息
+  },
+  components: {
+    top, //头部
+    logo, //logo
+    menuInfo, //导航
+    fenlei, //左侧分类导航
+    question, //问卷调查
+    basic, //基本信息
+    foot, //底部
+  },
+  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: 900px;
+  overflow: hidden;
+  margin: 10px 0;
+}
+.main .left {
+  width: 240px;
+  min-height: 900px;
+  margin: 0 10px 0 0;
+}
+.main .left .fenlei {
+  min-height: 60px;
+  background-color: #fff;
+  margin: 0 0 10px 0;
+}
+.main .left .question {
+  height: 350px;
+  background-color: #fff;
+}
+.main .right {
+  min-height: 1080px;
+  background-color: #fff;
+}
+.foot {
+  float: left;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+}
+</style>

src/layout/personCenter/basic.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="basic">
+    <el-row>
+      <el-col :span="24" class="basic">
+        <el-col :span="24" class="basicTop">
+          <span>基本信息</span>
+        </el-col>
+        <el-col :span="24" class="basicInfo">
+          <el-col :span="24" class="title">用户名称：{{ basicInfo.title }}</el-col>
+          <el-col :span="24" class="title">身份证号：{{ basicInfo.sfz }}</el-col>
+          <el-col :span="24" class="title">联系地址：{{ basicInfo.address }}</el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'basic',
+  props: {
+    basicInfo: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.basicTop {
+  height: 59px;
+  border-bottom: 1px solid #215299;
+}
+.basicTop span {
+  display: inline-block;
+  width: 130px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  background-color: #215299;
+  color: #fff;
+  font-size: 18px;
+}
+.basicInfo {
+  padding: 20px 40px;
+}
+.basicInfo .title {
+  height: 40px;
+  line-height: 40px;
+  font-size: 18px;
+  color: #888;
+}
+</style>

src/layout/personCenter/fenlei.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="fenlei">
+    <el-row>
+      <el-col class="swfl" :span="24">
+        <el-image style="width:22px;height:22px;margin:0 5px -5px 0;" :src="src"></el-image>
+        <span>个人中心</span>
+      </el-col>
+      <el-col :span="24">
+        <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#215299" active-text-color="#215299">
+          <el-menu-item index="1"><span slot="title">基本信息</span></el-menu-item>
+          <el-menu-item index="2"><span slot="title">消息管理</span></el-menu-item>
+          <el-menu-item index="3"><span slot="title">用户管理</span></el-menu-item>
+          <el-menu-item index="4"><span slot="title">我要发布</span></el-menu-item>
+          <el-menu-item index="5"><span slot="title">我的发布</span></el-menu-item>
+          <el-menu-item index="6"><span slot="title">我的审核</span></el-menu-item>
+          <el-menu-item index="7"><span slot="title">我的订购</span></el-menu-item>
+          <el-menu-item index="8"><span slot="title">注销账号</span></el-menu-item>
+        </el-menu>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'fenlei',
+  props: {},
+  components: {},
+  data: () => ({
+    src: require('@/assets/personal.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.swfl {
+  height: 60px;
+  width: 240px;
+  line-height: 60px;
+  background-color: #22529a;
+  text-align: center;
+}
+.swfl span {
+  font-size: 22px;
+  color: #ffffff;
+}
+/deep/.el-menu-item {
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border-bottom: 1px dashed;
+  font-size: 22px;
+}
+/deep/.el-menu-item:last-child {
+  border-bottom: none;
+}
+</style>

src/layout/personCenter/question.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="question">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="infoTop">
+          <el-image style="width:240px;height:60px;" :src="pic"></el-image>
+        </el-col>
+        <el-col :span="24" class="form">
+          <el-col :span="24" class="image">
+            <el-image :src="formImage" style="width:100px;height:80px;"></el-image>
+          </el-col>
+          <el-form ref="form" :model="form">
+            <el-form-item label="您是否愿意继续关注本平台">
+              <el-radio-group v-model="form.resource">
+                <el-radio label="愿意"></el-radio>
+                <el-radio label="不愿意"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit">确认提交</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'question',
+  props: {},
+  components: {},
+  data: () => ({
+    pic: require('@/assets/diaocha.gif'),
+    formImage: require('@/assets/cha.png'),
+    form: {
+      resource: '',
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    onSubmit() {
+      console.log('submit!');
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.infoTop {
+  width: 240px;
+  height: 60px;
+}
+.image {
+  text-align: center;
+  margin: 20px 0;
+}
+.form .el-form {
+  float: left;
+  width: 100%;
+  text-align: center;
+}
+/deep/.el-radio {
+  color: #000;
+}
+/deep/.el-form-item__label {
+  width: 100%;
+  text-align: center;
+  color: #000;
+}
+</style>

src/router/index.js

@@ -105,11 +105,18 @@ const routes = [
     name: 'recruit',
     component: () => import('../views/personnel/recruit.vue'),
   },
+  // 科技人才-就业指导
   {
     path: '/personnel/guidance',
     name: 'guidance',
     component: () => import('../views/personnel/guidance.vue'),
   },
+  // 个人中心-基本信息
+  {
+    path: '/personCenter/user',
+    name: 'user',
+    component: () => import('../views/personCenter/user.vue'),
+  },
   //个人中心-基本信息
   {
     path: '/svstem/svstem',

src/views/personCenter/user.vue

@@ -0,0 +1,39 @@
+<template>
+  <div id="user">
+    <uesrinfo-detail :info="info" :type="type" :basicInfo="basicInfo"></uesrinfo-detail>
+  </div>
+</template>
+
+<script>
+import uesrinfoDetail from '@/components/personCenter/user.vue';
+export default {
+  name: 'user',
+  props: {},
+  components: {
+    uesrinfoDetail,
+  },
+  data: () => ({
+    info: {
+      logo: require('@/assets/logo.png'),
+      banquan: '版权所有：吉林省计算中心',
+      jishu: '技术支持：长春市福瑞科技有限公司',
+      youbian: '邮编：130000',
+      chuanzhen: '传真：239823982',
+      address: '地址：吉林省长春市朝阳区前进大街1244号',
+      phone: '电话：0431-1234567',
+      email: '邮箱：123456@163.com',
+    },
+    type: 'basic',
+    basicInfo: {
+      title: '管理员',
+      sfz: '220182199603257019',
+      address: '吉林省长春市力旺广场B座16楼1608',
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>