01

2022-01-19 19:24:02 +08:00
parent 74a0130727
commit d0b9848102
7 changed files with 269 additions and 155 deletions
--- a/src/views/index/components/news_center.vue
+++ b/src/views/index/components/news_center.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="news_center">
-    <!--title-->
+    <!--title
    <el-row>
      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
        <div class="grid-content"></div>
@@ -21,7 +21,29 @@
          </el-col>
        </el-row>
      </el-col>
-    </el-row>
+    </el-row>-->
+    <!--title-->
+
+
+      <div class="headline">
+          <div class="hr_div">
+            <div class="hr_line_left">
+            </div>
+            <div class="hr_dot_left">
+            </div>
+          </div>
+          <div class="title">
+            {{ $t('message.news_center') }}
+          </div>
+        <div class="hr_div">
+          <div class="hr_line_right">
+          </div>
+          <div class="hr_dot_right">
+          </div>
+        </div>
+      </div>
+
+
    <!--录播图-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
@@ -54,13 +76,13 @@
      </el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
        <el-row class="news">
-          <el-col v-for="(news,index) in newsDate" :key="index" :xs="12" :sm="12" :md="12" :lg="6" :xl="6" >
-            <div class="news_context"  @click="getArticle(news)">
+          <el-col v-for="(news,index) in newsDate" :key="index" :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
+            <div class="news_context" @click="getArticle(news)">
              <div class="news_context_img">
                <img :src="news.imgurl" alt="">
              </div>
              <div class="news_context_text">
-                {{news.title}}
+                {{ news.title }}
              </div>
            </div>
          </el-col>
@@ -91,11 +113,11 @@ import {getParentNode} from "@/utils/sist";

 export default {
  name: "news_center",
-  data(){
-    return{
-      newsDate:[],
-      bannerDate:[],
-      width: document.documentElement.clientWidth>992,
+  data() {
+    return {
+      newsDate: [],
+      bannerDate: [],
+      width: document.documentElement.clientWidth > 992,
    }
  },
  created() {
@@ -103,27 +125,27 @@ export default {
    this.getBanner()
  },
  methods: {
-    getList(){
+    getList() {
      getArticleList({
-        type:"XC7D8m5gkr35BX1b4Otiln4",
+        type: "XC7D8m5gkr35BX1b4Otiln4",
        pageNum: 1,
        pageSize: 4
-      }).then(res=>{
+      }).then(res => {
        this.newsDate = res.rows
      })
    },
-    getArticle(news){
-      info(news.id).then(res=>{
+    getArticle(news) {
+      info(news.id).then(res => {
        let info = getParentNode(res.data.encodeId)
-        if (this.width){
-          this.$router.push("/pc/" + info.second.encodeId +"/" +info.three.encodeId+"?id="+news.id);
-        }else {
-          this.$router.push("/mobile/" + info.second.encodeId +"/" +info.three.encodeId+"?id="+news.id);
+        if (this.width) {
+          this.$router.push("/pc/" + info.second.encodeId + "/" + info.three.encodeId + "?id=" + news.id);
+        } else {
+          this.$router.push("/mobile/" + info.second.encodeId + "/" + info.three.encodeId + "?id=" + news.id);
        }
      })
    },
-    getBanner(){
-      banner("NEd5n92EMIpyyBslaNqsRgE").then(res=>{
+    getBanner() {
+      banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
        this.bannerDate = res.data
      })
    }
@@ -133,7 +155,8 @@ export default {

 <style scoped lang="scss">
@import '../css/comment.css';
-.news_center{
+
+.news_center {
  padding-bottom: 2rem;
 }

@@ -195,16 +218,16 @@ export default {
      margin: 1rem auto;
      width: 80%;
      //height: 4rem;
-      overflow:hidden; //超出的文本隐藏
-      text-overflow:ellipsis; //溢出用省略号显示
-      display:-webkit-box; //作为弹性伸缩盒子模型显示。
-      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-      -webkit-line-clamp:3; //显示的行
+      overflow: hidden; //超出的文本隐藏
+      text-overflow: ellipsis; //溢出用省略号显示
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 3; //显示的行
    }
  }
 }

-@media screen and  (min-width: 1100px) and (max-width: 1400px) {
+@media screen and (min-width: 1100px) and (max-width: 1400px) {
  .news_context {
    width: 20rem !important;
    height: 20rem !important;
--- a/src/views/index/components/party_building_activities.vue
+++ b/src/views/index/components/party_building_activities.vue
@@ -1,28 +1,48 @@
 <template>
  <div class="party_building_activities">
    <!--title-->
-    <el-row>
-      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
-        <div class="title">
-          <!--          {{ $t('message.news_center') }}-->
-          党群工作
+
+    <div class="headline">
+      <div class="hr_div">
+        <div class="hr_line_left">
        </div>
-        <el-row>
-          <el-col :span="8">
-            <hr class="hr">
-          </el-col>
-          <el-col :span="8">
-            <div class="divider_text">Party Building Activities</div>
-          </el-col>
-          <el-col :span="8">
-            <hr class="hr">
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
+        <div class="hr_dot_left">
+        </div>
+      </div>
+      <div class="title">
+        <!--{{ $t('message.news_center') }}-->
+        党群工作
+      </div>
+      <div class="hr_div">
+        <div class="hr_line_right">
+        </div>
+        <div class="hr_dot_right">
+        </div>
+      </div>
+    </div>
+    <!--<el-row>-->
+    <!--  <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">-->
+    <!--    <div class="grid-content"></div>-->
+    <!--  </el-col>-->
+    <!--  -->
+    <!--  <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">-->
+    <!--    <div class="title">-->
+    <!--      &lt;!&ndash;          {{ $t('message.news_center') }}&ndash;&gt;-->
+    <!--      党群工作-->
+    <!--    </div>-->
+    <!--    <el-row>-->
+    <!--      <el-col :span="8">-->
+    <!--        <hr class="hr">-->
+    <!--      </el-col>-->
+    <!--      <el-col :span="8">-->
+    <!--        <div class="divider_text">Party Building Activities</div>-->
+    <!--      </el-col>-->
+    <!--      <el-col :span="8">-->
+    <!--        <hr class="hr">-->
+    <!--      </el-col>-->
+    <!--    </el-row>-->
+    <!--  </el-col>-->
+    <!--</el-row>-->
    <!--轮播图-->

    <el-row>
@@ -34,30 +54,34 @@
      </el-col>
    </el-row>
    <!--更多-->
-    <el-row>
-      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
-        <div style="background: #DA2D2D;color: #FFFFFF;" class="more">
-          {{ $t('message.more') }}
+
+
+    <div class="headline">
+      <!--<div style="background: #DA2D2D;color: #E6E6E6;" class="more">-->
+      <!--  {{ $t('message.more') }}-->
+      <!--</div>-->
+      <!--<div class="more_img">-->
+      <!--  <img src="@/assets/index/party_building_activities/sy_icon_zhdh.png" alt="">-->
+      <!--</div>-->
+      <div class="hr_div">
+        <div class="hr_line_left">
        </div>
-        <div class="more_img">
-          <img src="@/assets/index/party_building_activities/sy_icon_zhdh.png" alt="">
+        <div class="hr_dot_left">
        </div>
-        <el-row>
-          <el-col :span="9">
-            <hr class="hr">
-          </el-col>
-          <el-col :span="6">
-            <div class="divider_text">党史教育</div>
-          </el-col>
-          <el-col :span="9">
-            <hr class="hr">
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
+      </div>
+      <div class="hr_text" style="color:#DA2D2D;">
+        <!--{{ $t('message.news_center') }}-->
+        党史教育
+      </div>
+      <div class="hr_div">
+        <div class="hr_line_right">
+        </div>
+        <div class="hr_dot_right">
+        </div>
+      </div>
+    </div>
+
+
    <!--党史教育内容-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
@@ -132,6 +156,14 @@ export default {
 }

 .headline {
+
+  .hr_line_left,.hr_line_right{
+    border-color: #DA2D2D !important;
+  }
+  .hr_dot_left,.hr_dot_right{
+    background-color: #DA2D2D !important;
+  }
+
  .title {
    background: #DA2D2D;
  }
--- a/src/views/index/components/scientific_research_trends.vue
+++ b/src/views/index/components/scientific_research_trends.vue
@@ -1,28 +1,49 @@
 <template>
  <div class="scientific_research_trends">
    <!--title-->
-    <el-row>
-      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
-        <div class="title">
-          <!--          {{ $t('message.news_center') }}-->
-          科学研究
+    <div class="headline">
+      <div class="hr_div">
+        <div class="hr_line_left">
        </div>
-        <el-row>
-          <el-col :span="8">
-            <hr class="hr">
-          </el-col>
-          <el-col :span="8">
-            <div class="divider_text">Scientific research trends</div>
-          </el-col>
-          <el-col :span="8">
-            <hr class="hr">
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
+        <div class="hr_dot_left">
+        </div>
+      </div>
+      <div class="title">
+        <!--{{ $t('message.news_center') }}-->
+        科学研究
+      </div>
+      <div class="hr_div">
+        <div class="hr_line_right">
+        </div>
+        <div class="hr_dot_right">
+        </div>
+      </div>
+    </div>
+
+
+
+    <!--<el-row>-->
+    <!--  <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">-->
+    <!--    <div class="grid-content"></div>-->
+    <!--  </el-col>-->
+    <!--  <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">-->
+    <!--    <div class="title">-->
+    <!--      &lt;!&ndash;          {{ $t('message.news_center') }}&ndash;&gt;-->
+    <!--      科学研究-->
+    <!--    </div>-->
+    <!--    <el-row>-->
+    <!--      <el-col :span="8">-->
+    <!--        <hr class="hr">-->
+    <!--      </el-col>-->
+    <!--      <el-col :span="8">-->
+    <!--        <div class="divider_text">Scientific research trends</div>-->
+    <!--      </el-col>-->
+    <!--      <el-col :span="8">-->
+    <!--        <hr class="hr">-->
+    <!--      </el-col>-->
+    <!--    </el-row>-->
+    <!--  </el-col>-->
+    <!--</el-row>-->
    <!--科学研究新闻内容-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
@@ -62,27 +83,28 @@
    </el-row>

    <!--更多-->
-    <el-row>
-      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
-        <div style="background: #FFFFFF;color: #1956BC;" class="more">
-          {{ $t('message.more') }}
+
+    <div class="headline">
+      <div style="background: #FFFFFF;color: #1956BC;" class="more" @click="lookMore(scientificData[0])">
+        {{ $t('message.more') }}
+      </div>
+      <div class="hr_div">
+        <div class="hr_line_left">
        </div>
-        <el-row>
-          <el-col :span="9">
-            <hr class="hr">
-          </el-col>
-          <el-col :span="6">
-            <div class="divider_text">学术交流</div>
-          </el-col>
-          <el-col :span="9">
-            <hr class="hr">
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
+        <div class="hr_dot_left">
+        </div>
+      </div>
+      <div class="hr_text" style="color:#E6E6E6;">
+        <!--{{ $t('message.news_center') }}-->
+        学术交流
+      </div>
+      <div class="hr_div">
+        <div class="hr_line_right">
+        </div>
+        <div class="hr_dot_right">
+        </div>
+      </div>
+    </div>
    <!--学术交流-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
--- a/src/views/index/components/teaching_student.vue
+++ b/src/views/index/components/teaching_student.vue
@@ -2,28 +2,25 @@
  <div class="teaching_student">

    <!--title-->
-    <el-row>
-      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
-        <div class="title">
-          <!--        {{ $t('message.news_center') }}-->
-          教学工作
+
+    <div class="headline">
+      <div class="hr_div">
+        <div class="hr_line_left">
        </div>
-        <el-row>
-          <el-col :span="8">
-            <hr class="hr">
-          </el-col>
-          <el-col :span="8">
-            <div class="divider_text">Teaching and student</div>
-          </el-col>
-          <el-col :span="8">
-            <hr class="hr">
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
+        <div class="hr_dot_left">
+        </div>
+      </div>
+      <div class="title">
+        <!--{{ $t('message.news_center') }}-->
+        教学工作
+      </div>
+      <div class="hr_div">
+        <div class="hr_line_right">
+        </div>
+        <div class="hr_dot_right">
+        </div>
+      </div>
+    </div>
    <!--教学工作内容-->

    <el-row>