更新

src/views/detail/semDetail copy.vue

@@ -0,0 +1,153 @@
+<template>
+  <div id="semDetail">
+    <el-row>
+      <div class="w_1200">
+        <el-col :span="24" class="semDetail">
+          <el-col :soan="24"> <el-image :src="gongqiuImage" class="gongqiuImage" style="width:100%;height:160px;"></el-image></el-col>
+          <el-col :span="24" class="title"
+            ><span>浏览次数:{{ plany.cishu }}</span
+            ><span>{{ plany.title }}</span></el-col
+          >
+          <el-col :span="24" v-for="(item, index) in fabiaolist" :key="index" class="list">
+            <el-col :span="4" class="lefts">
+              <el-col :span="24" class="name">会员名称</el-col>
+              <el-image :src="squareImage" style="width:65%;height: 128px;padding:5px 0 0 0;"></el-image>
+              <p>
+                <span>{{ item.name }}</span>
+              </p>
+            </el-col>
+            <el-col :span="19" class="under">
+              <el-col :span="24" class="underspan"
+                ><span style="color:green"><i class="el-icon-user-solid"></i></span><span>{{ item.ceng }}&nbsp;&nbsp;{{ item.date }}</span></el-col
+              >
+              <p>{{ item.context }}</p>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="chatInfo">
+            <el-col :span="24" class="message">
+              <el-col :span="24" class="info chat_frame" id="chat"> </el-col>
+            </el-col>
+            <el-col :span="24" class="input">
+              <el-col :span="24" class="title"><i class="el-icon-edit"></i> 发布评论 </el-col>
+              <wang-editor v-model="inputInfo" ref="editor" class="huifu"></wang-editor>
+              <el-button type="primary">发布评论</el-button>
+            </el-col>
+          </el-col>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import wangEditor from '@/components/wang-editor.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: news } = createNamespacedHelpers('news');
+export default {
+  name: 'semDetail',
+  props: {},
+  components: {
+    wangEditor,
+  },
+  data: () => ({
+    plany: { cishu: '100', title: '2020年度中德医疗项目顺利进行' },
+
+    detailinfo: {},
+    gongqiuImage: require('@/assets/live/111.png'),
+    squareImage: require('@/assets/live/222.png'),
+    inputInfo: '',
+    fabiaolist: [{ name: '测试1', context: '测试内容', ceng: '1楼', date: '2020-03-05' }],
+  }),
+  created() {
+    this.search();
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  methods: {
+    ...news(['fetch']),
+    async search() {
+      const res = await this.fetch(this.id);
+      this.$set(this, `detailinfo`, res.data);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 80%;
+  margin: 0 auto;
+}
+.semDetail {
+  float: left;
+  width: 100%;
+  min-height: 600px;
+  margin: 30px 0;
+}
+.semDetail .title {
+  height: 60px;
+  border-bottom: 10px solid #5096d2;
+}
+.semDetail .title span:first-child {
+  background-color: #a5d2f5;
+  height: 50px;
+  display: inline-block;
+  color: #5096d2;
+  line-height: 50px;
+  padding: 0 0 0 30px;
+  width: 14%;
+  border-bottom: 10px solid #5096d2;
+}
+.semDetail .title span:nth-child(2) {
+  height: 40px;
+  display: inline-block;
+  line-height: 40px;
+  text-align: center;
+  width: 80%;
+  font-size: 20px;
+  font-weight: bold;
+  letter-spacing: 8px;
+}
+
+.semDetail .list .lefts {
+  background-color: #a5d2f5;
+  height: 220px;
+  text-align: center;
+  overflow: hidden;
+}
+.semDetail .list .lefts .name {
+  padding: 20px 0 5px 0;
+  color: #fff;
+  font-weight: bold;
+  font-size: 18px;
+  border-bottom: 1px dashed #fff;
+}
+.semDetail .list .lefts span {
+  padding: 5px 0 5px 0;
+  color: #fff;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.under .underspan {
+  font-size: 16px;
+  margin: 0 20px 0 20px;
+  border-bottom: 1px dashed red;
+  margin: 0 0 10px 0;
+}
+.under p {
+  height: 170px;
+  margin: 30px 10px 20px 10px !important;
+  border: 1px dashed #000000;
+}
+.chatInfo .input .el-button {
+  margin: 20px 0 0 0;
+}
+</style>

src/views/detail/semDetail.vue

@@ -2,35 +2,35 @@
   <div id="semDetail">
     <el-row>
       <div class="w_1200">
-        <el-col :span="24" class="semDetail">
-          <el-col :soan="24"> <el-image :src="gongqiuImage" class="gongqiuImage" style="width:100%;height:160px;"></el-image></el-col>
-          <el-col :span="24" class="title"
-            ><span>浏览次数:{{ plany.cishu }}</span
-            ><span>{{ plany.title }}</span></el-col
-          >
-          <el-col :span="24" v-for="(item, index) in fabiaolist" :key="index" class="list">
-            <el-col :span="4" class="lefts">
-              <el-col :span="24" class="name">会员名称</el-col>
-              <el-image :src="squareImage" style="width:65%;height: 128px;padding:5px 0 0 0;"></el-image>
-              <p>
-                <span>{{ item.name }}</span>
-              </p>
-            </el-col>
-            <el-col :span="19" class="under">
-              <el-col :span="24" class="underspan"
-                ><span style="color:green"><i class="el-icon-user-solid"></i></span><span>{{ item.ceng }}&nbsp;&nbsp;{{ item.date }}</span></el-col
-              >
-              <p>{{ item.context }}</p>
-            </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="one">
+            <el-image :src="gongqiuImage"></el-image>
           </el-col>
-          <el-col :span="24" class="chatInfo">
-            <el-col :span="24" class="message">
-              <el-col :span="24" class="info chat_frame" id="chat"> </el-col>
+          <el-col :span="24" class="two">
+            <el-col :span="24" class="twoTop">
+              <el-col :span="3" class="left">
+                浏览次数：1
+              </el-col>
+              <el-col :span="21" class="right">
+                [专题] 2020年度“中德医疗交流项目”面试工作顺利进行
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="twoMess">
+              <el-col :span="24" class="list">
+                <el-col :span="3" class="left">
+                  <el-col :span="24" class="one">
+                    会员名称
+                  </el-col>
+                  <el-col :span="24" class="two">
+                    <el-image :src="squareImage"></el-image>
+                    <p>职位名称</p>
+                  </el-col>
+                </el-col>
+                <el-col :span="21" class="right">右侧</el-col>
+              </el-col>
             </el-col>
-            <el-col :span="24" class="input">
-              <el-col :span="24" class="title"><i class="el-icon-edit"></i> 发布评论 </el-col>
-              <wang-editor v-model="inputInfo" ref="editor" class="huifu"></wang-editor>
-              <el-button type="primary">发布评论</el-button>
+            <el-col :span="24" class="twoInput">
+              输入
             </el-col>
           </el-col>
         </el-col>
@@ -40,43 +40,17 @@
 </template>
 
 <script>
-import wangEditor from '@/components/wang-editor.vue';
-import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: news } = createNamespacedHelpers('news');
 export default {
   name: 'semDetail',
   props: {},
-  components: {
-    wangEditor,
-  },
+  components: {},
   data: () => ({
-    plany: { cishu: '100', title: '2020年度中德医疗项目顺利进行' },
-
-    detailinfo: {},
     gongqiuImage: require('@/assets/live/111.png'),
     squareImage: require('@/assets/live/222.png'),
-    inputInfo: '',
-    fabiaolist: [{ name: '测试1', context: '测试内容', ceng: '1楼', date: '2020-03-05' }],
   }),
-  created() {
-    this.search();
-  },
-  computed: {
-    id() {
-      return this.$route.query.id;
-    },
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  methods: {
-    ...news(['fetch']),
-    async search() {
-      const res = await this.fetch(this.id);
-      this.$set(this, `detailinfo`, res.data);
-    },
-  },
+  created() {},
+  computed: {},
+  methods: {},
 };
 </script>
 
@@ -85,69 +59,72 @@ export default {
   width: 80%;
   margin: 0 auto;
 }
-.semDetail {
+.main {
   float: left;
   width: 100%;
   min-height: 600px;
   margin: 30px 0;
 }
-.semDetail .title {
+.main .one {
+  float: left;
+  width: 100%;
+  height: 160px;
+  margin: 0 0 30px 0;
+}
+.main .two {
+  float: left;
+  width: 100%;
+}
+.main .two .twoTop {
+  float: left;
+  width: 100%;
   height: 60px;
-  border-bottom: 10px solid #5096d2;
+  border-bottom: 10px solid red;
 }
-.semDetail .title span:first-child {
-  background-color: #a5d2f5;
+
+.main .two .twoTop .left {
+  float: left;
   height: 50px;
-  display: inline-block;
-  color: #5096d2;
   line-height: 50px;
-  padding: 0 0 0 30px;
-  width: 14%;
-  border-bottom: 10px solid #5096d2;
-}
-.semDetail .title span:nth-child(2) {
-  height: 40px;
-  display: inline-block;
-  line-height: 40px;
   text-align: center;
-  width: 80%;
-  font-size: 20px;
-  font-weight: bold;
-  letter-spacing: 8px;
+  font-size: 18px;
+  color: #00316e;
+  background: #a5d2f5;
 }
-
-.semDetail .list .lefts {
-  background-color: #a5d2f5;
-  height: 220px;
-  text-align: center;
-  overflow: hidden;
+.main .two .twoTop .right {
+  float: left;
+  height: 50px;
+  line-height: 50px;
+  padding: 0 15px;
+  font-size: 30px;
+  color: #023658;
 }
-.semDetail .list .lefts .name {
-  padding: 20px 0 5px 0;
-  color: #fff;
-  font-weight: bold;
-  font-size: 18px;
-  border-bottom: 1px dashed #fff;
+.list {
+  float: left;
+  width: 100%;
 }
-.semDetail .list .lefts span {
-  padding: 5px 0 5px 0;
-  color: #fff;
-  font-size: 18px;
-  font-weight: bold;
+.list .left {
+  float: left;
 }
-
-.under .underspan {
-  font-size: 16px;
-  margin: 0 20px 0 20px;
-  border-bottom: 1px dashed red;
-  margin: 0 0 10px 0;
+.list .left .one {
+  float: left;
+  width: 100%;
+  height: 60px;
+  margin: 0;
+  line-height: 60px;
+  text-align: center;
+  background-color: #5096d2;
+  color: #fff;
+  border-bottom: 1px dashed #ccc;
 }
-.under p {
-  height: 170px;
-  margin: 30px 10px 20px 10px !important;
-  border: 1px dashed #000000;
+.list .left .two {
+  float: left;
+  width: 100%;
+  height: 460px;
+  background-color: #5096d2;
 }
-.chatInfo .input .el-button {
-  margin: 20px 0 0 0;
+.list .left .two .el-image {
+  width: 155px;
+  height: 155px;
 }
 </style>