预览

src/views/Index.vue

@@ -1,3 +1,32 @@
+<style lang="scss" scoped>
+  .preview {
+    height: 80vh;
+    overflow: auto;
+    .aname{
+      text-align: center;
+      margin-bottom: 20px;
+      color: #333;
+      font-size: 16px;
+    }
+    .ainfo{
+      display: flex;
+      margin-bottom: 10px;
+      p{
+        width: 60%;
+        margin-left: 15px;
+        line-height: 26px;
+      }
+    }
+    b{
+      color: #333;
+    }
+    div{
+      line-height: 26px;
+      margin-bottom: 10px;
+      overflow: auto;
+    }
+  }
+</style>
 <template>
   <section  v-if="this.role_id==1" class="index-content">
     <div class="index_header">
@@ -104,6 +133,7 @@
               class="con2"
               v-for="(item, index) in form.article_readnum_top5"
               :key="index"
+              @click="getArticle(item.id),open=true"
             >
               <span>{{ index + 1 }}</span>
               <span class="a_title">{{ item.name }}</span>
@@ -130,6 +160,30 @@
         </div>
       </div>
     </div>
+
+    <el-dialog
+      title=""
+      :visible.sync="open"
+      width="414px">
+      <div class="preview">
+        <p class="aname">{{article.name}}</p>
+        <div class="ainfo">
+          <img width="100" :src="article.img" alt="">
+          <p>
+            发布单位：{{journal_name}} <br>
+            作者：{{article.author}} <br>
+            发表时间：{{article.publish_time}} 
+          </p>
+        </div>
+        <b>文章简介</b>
+        <div class="adesc">{{article.desc}}</div>
+        <b>文章内容</b>
+        <div v-html="article.content"></div>
+      </div>
+      <!-- <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="open = false">确 定</el-button>
+      </span> -->
+    </el-dialog>
   </section>
   <!-- 期刊管理员首页 -->
   <section v-else>
@@ -144,7 +198,9 @@ export default {
   data() {
     return {
       //   chartData: [],
+      open:false,
       form: {},
+      article:{},
       list: [
         { article_header: "中国生态效率时空演化研究", count: "132" },
         { article_header: "中国生态效率时空演化研究", count: "132" },
@@ -800,6 +856,12 @@ export default {
         this.getEcharts();
       });
     },
+    getArticle(id){
+      this.article={};
+      this.$api.getArticle({ id: id }).then((res) => {
+          this.article = res.data.data;
+      });
+    }
   },
   mounted() {},
   beforeCreate(){
@@ -948,6 +1010,7 @@ section {
           padding: 0 10px;
           display: flex;
           width: 80%;
+          cursor: pointer;
           &:nth-of-type(2) {
             color: #ef3d3d;
           }