00

src/views/content/components/list.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="list">
+<!--{{value}}-->
+    <el-row>
+      <!--正文内容-->
+      <el-col class="context">
+        <div v-for="(item,index) in value.data" class="tw">
+          <el-row>
+            <el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
+              <div class="tw_time">
+                <div class="tw_top">
+                  {{getDay(item.publishTime)}}
+                </div>
+                <div class="tw_bottoms">
+                  {{getTime(item.publishTime)}}
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
+              <div class="tw_context">
+                <div class="tw_context_title">
+                  {{item.title}}
+                </div>
+                <div class="tw_context_text" v-html="item.content"></div>
+              </div>
+            </el-col>
+            <el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
+              <div class="tw_img">
+                <img :src="item.imgurl" alt="">
+              </div>
+            </el-col>
+          </el-row>
+          <hr v-if="index != value.data.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "list",
+  props:{
+    value: {
+      type: Array,
+      default: {
+        data:[{
+          content: "",
+          title: "",
+          publishTime: "2022-01-15 17:02:13",
+          imgurl: "http://sistfile.hchyun.cn/2022/01/15/b0904e59-25d4-433e-bd0f-e23940d6267d.png",
+        }]
+      },
+    },
+  },
+  data() {
+    return {
+      width: document.documentElement.clientWidth
+    }
+  },
+  methods:{
+    getDay(time){
+      let day = new Date(time).getDate();
+      return day
+    },
+    getTime(time){
+      let date = new Date(time);
+      return date.getFullYear() +"-" + date.getMonth()+1
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.context {
+  margin: 3rem 2rem;
+  padding-bottom: 3rem;
+  //width: 84.3rem;
+  background: #FFFFFF;
+
+  .tw {
+    margin-top: 4rem;
+  }
+
+  .tw_img{
+    width: 100%;
+    text-align: left;
+    img{
+      width: 90%;
+    }
+  }
+  .tw_time {
+    border-right: .1rem solid #D5D5D5;
+    height: 10rem;
+    width: 10rem;
+    color: #1956BC;
+    text-align: center;
+
+    .tw_top {
+      height: 8rem;
+      width: 100%;
+      line-height: 8rem;
+      font-size: 5.2rem;
+    }
+
+    .tw_bottoms {
+      height: 2rem;
+      width: 100%;
+      font-size: 1.4rem;
+    }
+  }
+
+  .tw_context {
+
+    font-family: PingFangSC-Medium, PingFang SC;
+    color: #161616;
+
+
+    .tw_context_title {
+      overflow:hidden; //超出的文本隐藏
+      text-overflow:ellipsis; //溢出用省略号显示
+      white-space:nowrap; //溢出不换行
+      font-size: 2rem;
+      font-weight: 600;
+      padding-right: 2rem;
+
+    }
+
+    .tw_context_text {
+      margin-top: .8rem;
+      font-size: 1.6rem;
+      font-weight: 400;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display:-webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp:3; //显示的行
+    }
+  }
+
+  .title {
+    font-size: 2.4rem;
+    font-weight: 500;
+    color: #1956BC;
+    text-align: center;
+  }
+
+  .text {
+    margin-top: 2rem;
+    font-size: 1.2rem;
+    font-weight: 400;
+    color: #3C3C3C;
+  }
+}
+</style>