From 695323c134f1e70d2d02c6cc0ebf529d91e84383 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Mon, 9 Sep 2024 10:43:09 +0800
Subject: [PATCH] fix

---
 src/components/menuTree/index.vue |   10 +
 src/pages/column/index.vue        |    5 +
 src/pages/news/index.vue          | 1156 +++++++++++++++--------------
 3 files changed, 605 insertions(+), 566 deletions(-)

diff --git a/src/components/menuTree/index.vue b/src/components/menuTree/index.vue
index 2a5c152..00aaa78 100644
--- a/src/components/menuTree/index.vue
+++ b/src/components/menuTree/index.vue
@@ -84,4 +84,14 @@ export default {
     }
   }
 }
+
+@media (max-width: 640px) {
+  .nav {
+    &>.menu-child {
+      &>.el-menu-item {
+        font-size: 1rem;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue
index e15df8b..f0dbc68 100644
--- a/src/pages/column/index.vue
+++ b/src/pages/column/index.vue
@@ -1522,5 +1522,10 @@ export default {
       }
     }
   }
+
+  .detail {
+    max-width: 100%;
+    margin-top: 20px;
+  }
 }
 </style>
diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue
index a3f2d44..c048376 100644
--- a/src/pages/news/index.vue
+++ b/src/pages/news/index.vue
@@ -1,15 +1,12 @@
 <template>
   <div class="wrap">
     <el-carousel :interval="6000"
-                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
-                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+      :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable"
-                          :key="i">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
-               @click="openLink(item)">
-            <img :src="item.pic"
-                 alt="">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', { 'cursor-pointer': isLink(item.link.linkName) }]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -17,136 +14,89 @@
     </el-carousel>
 
     <div class="newsTab">
-      <ul class="scollBox wow fadeInLeft"
-          ref="newsTab">
+      <ul class="scollBox wow fadeInLeft" ref="newsTab">
         <template v-for="(item, i) in modules[1].list">
-          <li v-if="item.columnName"
-              :class="{active: i == curColumn}"
-              :key="i"
-              @click="tabChange($event,i)">{{ item.columnName }}</li>
+          <li v-if="item.columnName" :class="{ active: i == curColumn }" :key="i" @click="tabChange($event, i)">{{
+            item.columnName }}</li>
         </template>
       </ul>
     </div>
 
     <div class="block">
-      <div class="inner"
-           v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
-        <div class="news-banner wow fadeInDown"
-             data-wow-delay="0.5s"
-             @click="toArtice(curArticle, modules[1].list[curColumn])">
-          <img width="50%"
-               height="410"
-               class="titileImg"
-               :src="curArticle.titleImg"
-               alt=""
-               onerror="javascript:this.src='./images/3.png';">
+      <div class="inner" v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
+        <div class="news-banner wow fadeInDown" data-wow-delay="0.5s"
+          @click="toArtice(curArticle, modules[1].list[curColumn])">
+          <img width="50%" height="410" class="titileImg" :src="curArticle.titleImg" alt=""
+            onerror="javascript:this.src='./images/3.png';">
           <div class="right">
             <h6>{{ curArticle.title }}</h6>
-            <div class="des"
-                 v-html="curArticle.mainBody"></div>
+            <div class="des" v-html="curArticle.mainBody"></div>
             <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
             <ul class="inds">
-              <li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length"
-                  :key="i"
-                  :class="{active: curInd == i - 1}"
-                  @click.stop="switchCarousel(i - 1)"></li>
+              <li
+                v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length"
+                :key="i" :class="{ active: curInd == i - 1 }" @click.stop="switchCarousel(i - 1)"></li>
             </ul>
           </div>
         </div>
 
         <ul class="card">
           <template v-for="(item, i) in modules[1].list[curColumn].articles">
-            <li v-if="i > 2"
-                :key="i"
-                class="wow fadeInDown"
-                :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
-              <img class="pic"
-                   :src="item.titleImg"
-                   alt="">
+            <li v-if="i > 2" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
+              <img class="pic" :src="item.titleImg" alt="">
               <div class="texts">
                 <p class="meta">{{ item.releaseTime }} {{ item.author && ' | ' + item.author }}</p>
                 <div class="des">{{ item.title }}</div>
-                <img class="arrow"
-                     src="@/assets/images/arrow.png"
-                     alt=""
-                     @click="toArtice(item, modules[1].list[curColumn])">
+                <img class="arrow" src="@/assets/images/arrow.png" alt=""
+                  @click="toArtice(item, modules[1].list[curColumn])">
               </div>
             </li>
           </template>
         </ul>
-        <div class="more wow fadeInDown"
-             data-wow-delay="0.5s"
-             @click="toMore">more ></div>
+        <div class="more wow fadeInDown" data-wow-delay="0.5s" @click="toMore">more ></div>
       </div>
     </div>
 
     <div class="block gray">
       <div class="inner lg">
         <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
-        <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
-        <div class="shop-shows"
-             v-if="articles.length">
-          <div class="left wow fadeInLeft"
-               data-wow-delay="0.5s"
-               @click="toArtice(articles[0], modules[3].form)">
-            <img class="pic"
-                 width="100%"
-                 height="400"
-                 :src="articles[0].titleImg"
-                 alt=""
-                 onerror="javascript:this.src='./images/2.png';">
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
+        <div class="shop-shows" v-if="articles.length">
+          <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles[0], modules[3].form)">
+            <img class="pic" width="100%" height="400" :src="articles[0].titleImg" alt=""
+              onerror="javascript:this.src='./images/2.png';">
             <div class="texts">
               <h6>{{ articles[0].title }}</h6>
-              <div class="des"
-                   v-html="articles[0].mainBody"></div>
+              <div class="des" v-html="articles[0].mainBody"></div>
             </div>
           </div>
-          <div v-if="articles.length > 1"
-               class="right wow fadeInRight"
-               data-wow-delay="0.5s">
+          <div v-if="articles.length > 1" class="right wow fadeInRight" data-wow-delay="0.5s">
             <ul class="show-card">
-              <li v-if="articles[1]"
-                  @click="toArtice(articles[1], modules[3].form)">
-                <img class="pic"
-                     :src="articles[1].titleImg"
-                     alt="">
+              <li v-if="articles[1]" @click="toArtice(articles[1], modules[3].form)">
+                <img class="pic" :src="articles[1].titleImg" alt="">
                 <div class="text">{{ articles[1].title }}</div>
               </li>
-              <li v-if="articles[2]"
-                  @click="toArtice(articles[2], modules[3].form)">
-                <img class="pic"
-                     :src="articles[2].titleImg"
-                     alt="">
+              <li v-if="articles[2]" @click="toArtice(articles[2], modules[3].form)">
+                <img class="pic" :src="articles[2].titleImg" alt="">
                 <div class="text">{{ articles[2].title }}</div>
               </li>
             </ul>
             <ul class="card-list">
               <template v-for="(item, i) in articles">
-                <li v-if="i > 2"
-                    :key="i">
-                  <img class="pic"
-                       :src="item.titleImg"
-                       alt="">
+                <li v-if="i > 2" :key="i">
+                  <img class="pic" :src="item.titleImg" alt="">
                   <div class="texts">
                     <h6>{{ item.title }}</h6>
-                    <div class="des"
-                         v-html="item.mainBody"></div>
+                    <div class="des" v-html="item.mainBody"></div>
                   </div>
-                  <img class="arrow"
-                       src="@/assets/images/arrow.png"
-                       alt=""
-                       @click="toArtice(item, modules[3].form)">
+                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[3].form)">
                 </li>
               </template>
             </ul>
           </div>
         </div>
-        <div class="all-link m-t-10"
-             @click="toAll(modules[3].form)">
-          <span>{{$t('column.all')}} <img class="icon"
-                 src="@/assets/images/arrow.png"
-                 alt=""></span>
+        <div class="all-link m-t-10" @click="toAll(modules[3].form)">
+          <span>{{ $t('column.all') }} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
         </div>
       </div>
     </div>
@@ -154,19 +104,11 @@
     <div class="block conference">
       <div class="inner lg">
         <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
-        <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
-        <div class="shows"
-             v-if="articles1.length">
-          <div class="left wow fadeInLeft"
-               data-wow-delay="0.5s"
-               @click="toArtice(articles1[0], modules[5].form)">
-            <img class="pic"
-                 width="100%"
-                 height="558"
-                 :src="articles1[0].titleImg"
-                 alt=""
-                 onerror="javascript:this.src='./images/1.png';">
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
+        <div class="shows" v-if="articles1.length">
+          <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles1[0], modules[5].form)">
+            <img class="pic" width="100%" height="558" :src="articles1[0].titleImg" alt=""
+              onerror="javascript:this.src='./images/1.png';">
             <div class="texts">
               <div class="meta">
                 <p class="date">{{ articles1[0].date }}</p>
@@ -174,48 +116,30 @@
               </div>
               <div>
                 <h6>{{ articles1[0].title }}</h6>
-                <div class="des"
-                     v-html="articles1[0].mainBody"></div>
+                <div class="des" v-html="articles1[0].mainBody"></div>
               </div>
             </div>
           </div>
-          <ul class="card-list wow fadeInRight"
-              data-wow-delay="0.5s">
+          <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
             <template v-for="(item, i) in articles1">
-              <li v-if="i"
-                  :key="i"
-                  @click="toArtice(item, modules[5].form)">
-                <img class="pic"
-                     :src="item.titleImg"
-                     alt="">
+              <li v-if="i" :key="i" @click="toArtice(item, modules[5].form)">
+                <img class="pic" :src="item.titleImg" alt="">
                 <div class="texts">
                   <h6>{{ item.title }}</h6>
-                  <p v-if="item.keynoteSpeaker"
-                     class="text">
-                    <img class="icon"
-                         src="@/assets/images/mine.png"
-                         alt="">
+                  <p v-if="item.keynoteSpeaker" class="text">
+                    <img class="icon" src="@/assets/images/mine.png" alt="">
                     <span>{{ item.keynoteSpeaker }}</span>
                   </p>
-                  <p v-if="item.activityStartTime"
-                     class="text">
-                    <img class="icon"
-                         src="@/assets/images/time.png"
-                         alt="">
+                  <p v-if="item.activityStartTime" class="text">
+                    <img class="icon" src="@/assets/images/time.png" alt="">
                     <span>Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}</span>
                   </p>
-                  <p v-if="item.onlineLocation"
-                     class="text">
-                    <img class="icon"
-                         src="@/assets/images/online.png"
-                         alt="">
+                  <p v-if="item.onlineLocation" class="text">
+                    <img class="icon" src="@/assets/images/online.png" alt="">
                     <span>Onlone: {{ item.onlineLocation }}</span>
                   </p>
-                  <p v-if="item.offlineLocation"
-                     class="text">
-                    <img class="icon"
-                         src="@/assets/images/location.png"
-                         alt="">
+                  <p v-if="item.offlineLocation" class="text">
+                    <img class="icon" src="@/assets/images/location.png" alt="">
                     <span>Address: {{ item.offlineLocation }}</span>
                   </p>
                 </div>
@@ -223,11 +147,9 @@
             </template>
           </ul>
         </div>
-        <div class="all-link m-t-10"
-             @click="toAll(modules[5].form)">
-          <span style="color: #fff">{{$t('column.all')}} <img class="icon"
-                 src="@/assets/images/arrow.png"
-                 alt=""></span>
+        <div class="all-link m-t-10" @click="toAll(modules[5].form)">
+          <span style="color: #fff">{{ $t('column.all') }} <img class="icon" src="@/assets/images/arrow.png"
+              alt=""></span>
         </div>
       </div>
     </div>
@@ -385,8 +307,8 @@ export default {
     },
     // 跳转more
     toMore () {
-      const { column } = this.modules[1].list[this.curColumn]
-      column.length && this.$router.push(`/column?id=${column[column.length - 1]}`)
+      const { column, site } = this.modules[1].list[this.curColumn]
+      column.length && this.$router.push(`/column?id=${column[column.length - 1]}&siteId=${site}`)
     }
   }
 };
@@ -395,495 +317,597 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+
 .wrap {
-    /deep/ .el-carousel {
-        height: 24rem;
-        .el-carousel__container {
-            height: 24rem;
-        }
-        img {
-            height: 24rem;
-        }
+  /deep/ .el-carousel {
+    height: 24rem;
+
+    .el-carousel__container {
+      height: 24rem;
     }
+
+    img {
+      height: 24rem;
+    }
+  }
 }
+
 .banner-item {
-    .banner-name {
-        font-size: 2.16rem;
-    }
+  .banner-name {
+    font-size: 2.16rem;
+  }
 }
+
 .block {
-    padding: 3.85rem 0;
+  padding: 3.85rem 0;
 }
+
 .newsTab {
-    box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26);
-    .scollBox {
-        width: 85.714rem;
-        margin: auto;
-        display: flex;
-        justify-content: center;
-    }
-    li {
-        flex: 1;
-        text-align: center;
-        padding: 1.25rem 0.95rem;
-        margin: 0 10px;
-        font-size: 1.1rem;
-        color: #333;
-        border-bottom: 4px solid transparent;
-        text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
-        cursor: pointer;
-        &.active {
-            color: #1583ff;
-            border-bottom-color: #1583ff;
-        }
+  box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26);
+
+  .scollBox {
+    width: 85.714rem;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+  }
+
+  li {
+    flex: 1;
+    text-align: center;
+    padding: 1.25rem 0.95rem;
+    margin: 0 10px;
+    font-size: 1.1rem;
+    color: #333;
+    border-bottom: 4px solid transparent;
+    text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
+    cursor: pointer;
+
+    &.active {
+      color: #1583ff;
+      border-bottom-color: #1583ff;
     }
+  }
 }
+
 /deep/.articles {
-    width: 50%;
-    .el-carousel__indicators--horizontal {
-        bottom: 1.25rem;
-        left: 50.25rem;
-    }
+  width: 50%;
+
+  .el-carousel__indicators--horizontal {
+    bottom: 1.25rem;
+    left: 50.25rem;
+  }
 }
+
 .lg {
-    .intro {
-        margin-bottom: 4rem;
-    }
+  .intro {
+    margin-bottom: 4rem;
+  }
 }
+
 .news-banner {
+  display: flex;
+  cursor: pointer;
+
+  .titileImg {
+    height: auto;
+  }
+
+  .pic {
+    width: 43.75rem;
+    height: 23.75rem;
+  }
+
+  .right {
+    position: relative;
+    width: 50%;
+    padding: 2.5rem 2.5rem 1.5rem;
+    background: #1583ff;
+    color: #fff;
+
+    &:hover {
+      background: #465f85;
+
+      h6,
+      .des,
+      .meta {
+        color: #fff;
+        transform: translateY(15px);
+      }
+    }
+  }
+
+  .inds {
+    position: absolute;
+    bottom: 2.5rem;
+    left: 3.75rem;
     display: flex;
-    cursor: pointer;
-    .titileImg {
-        height: auto;
+
+    li {
+      width: 0.625rem;
+      height: 0.625rem;
+      margin-right: 0.75rem;
+      background: #ffffff;
+      border-radius: 50%;
+      transition: 0.2s;
+
+      &.active {
+        width: 1.875rem;
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 5px;
+      }
     }
-    .pic {
-        width: 43.75rem;
-        height: 23.75rem;
+  }
+
+  h6 {
+    font-size: 1.2rem;
+    transition: 0.3s;
+  }
+
+  .des {
+    margin: 1.5rem 0;
+    font-size: 0.88rem;
+    line-height: 1.3714rem;
+    transition: 0.3s;
+  }
+
+  .meta {
+    font-size: 0.88rem;
+    transition: 0.3s;
+  }
+}
+
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 2rem;
+  width: 100%;
+
+  li {
+    width: 32.5%;
+    margin-right: 1%;
+    box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
+    border-radius: 6px;
+    transition: 0.3s;
+
+    &:hover {
+      transform: scale(1.05);
     }
-    .right {
-        position: relative;
-        width: 50%;
-        padding: 2.5rem 2.5rem 1.5rem;
-        background: #1583ff;
-        color: #fff;
-        &:hover {
-            background: #465f85;
-            h6,
-            .des,
-            .meta {
-                color: #fff;
-                transform: translateY(15px);
-            }
-        }
+
+    &:last-child {
+      margin-right: 0;
     }
-    .inds {
-        position: absolute;
-        bottom: 2.5rem;
-        left: 3.75rem;
-        display: flex;
-        li {
-            width: 0.625rem;
-            height: 0.625rem;
-            margin-right: 0.75rem;
-            background: #ffffff;
-            border-radius: 50%;
-            transition: 0.2s;
-            &.active {
-                width: 1.875rem;
-                background: rgba(255, 255, 255, 0.3);
-                border-radius: 5px;
-            }
-        }
+  }
+
+  .pic {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+
+  .texts {
+    padding: 2rem 1.5rem;
+  }
+
+  .meta {
+    font-size: 0.88rem;
+    color: #666;
+  }
+
+  .des {
+    height: 3.7rem;
+    margin: 10px 0;
+    font-size: 1.25rem;
+    font-family: SFProDisplay;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.7rem;
+    -webkit-line-clamp: 2;
+  }
+
+  .arrow {
+    width: 2.25rem;
+  }
+}
+
+.more {
+  width: 23.375rem;
+  margin: 3.625rem auto 0;
+  line-height: 64px;
+  font-size: 1.875rem;
+  text-align: center;
+  color: #1583ff;
+  border-radius: 35px;
+  border: 2px solid #2b6cef;
+  cursor: pointer;
+}
+
+.shop-shows {
+  display: flex;
+
+  .left {
+    width: 41.25rem;
+    margin-right: 1.25rem;
+    background-color: #fff;
+    cursor: pointer;
+    overflow: hidden;
+
+    .pic {
+      transition: 0.3s;
+      height: auto;
+      object-fit: cover;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+    }
+
+    .texts {
+      padding: 2rem 1.5rem;
     }
+
     h6 {
-        font-size: 1.2rem;
-        transition: 0.3s;
+      font-size: 1.2rem;
+      color: #272727;
     }
+
     .des {
-        margin: 1.5rem 0;
-        font-size: 0.88rem;
-        line-height: 1.3714rem;
-        transition: 0.3s;
+      margin-top: 10px;
+      font-size: 0.88rem;
+      color: #666;
+      line-height: 1.714rem;
     }
-    .meta {
-        font-size: 0.88rem;
-        transition: 0.3s;
-    }
-}
-.card {
+  }
+
+  .right {
+    width: 60%;
+    overflow: hidden;
+  }
+
+  .show-card {
     display: flex;
-    flex-wrap: wrap;
-    margin-top: 2rem;
-    width: 100%;
+    margin-bottom: 1.25rem;
 
     li {
-        width: 32.5%;
-        margin-right: 1%;
-        box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
-        border-radius: 6px;
-        transition: 0.3s;
-        &:hover {
-            transform: scale(1.05);
-        }
-        &:last-child {
-            margin-right: 0;
-        }
+      position: relative;
+      height: auto;
+      overflow: hidden;
+      cursor: pointer;
+
+      &:first-child {
+        margin-right: 1.375rem;
+      }
     }
+
     .pic {
-        width: 100%;
-        height: auto;
-        object-fit: cover;
+      width: 25rem;
+      height: 12.3125rem;
+      transition: 0.3s;
+      object-fit: cover;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+    }
+
+    .text {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      font-size: 0.88rem;
+      color: #fff;
+      padding: 0 1rem;
+      line-height: 48px;
+      text-align: center;
+      @include ellipsis;
+      background: rgba(0, 0, 0, 0.49);
+      box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
     }
+  }
+
+  .card-list {
+    padding: 1.5rem 1.3rem;
+    background-color: #fff;
+
+    li {
+      display: inline-flex;
+      align-items: center;
+      margin-bottom: 0.9rem;
+      transition: 0.3s;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .pic {
+      width: 8rem;
+      height: auto;
+      margin-right: 1.5rem;
+      object-fit: cover;
+    }
+
     .texts {
-        padding: 2rem 1.5rem;
+      width: calc(100% - 15rem);
+      margin-right: 3.5rem;
     }
-    .meta {
-        font-size: 0.88rem;
-        color: #666;
+
+    h6 {
+      margin-bottom: 10px;
+      font-size: 1rem;
+      color: #272727;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
+
     .des {
-        height: 3.7rem;
-        margin: 10px 0;
-        font-size: 1.25rem;
-        font-family: SFProDisplay;
-        font-weight: 500;
-        color: #333;
-        line-height: 1.7rem;
-        -webkit-line-clamp: 2;
+      font-size: 0.7rem;
+      color: #666;
+      line-height: 1.4rem;
+      text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
+      -webkit-line-clamp: 2;
     }
+
     .arrow {
-        width: 2.25rem;
+      width: 2rem;
     }
+  }
 }
-.more {
-    width: 23.375rem;
-    margin: 3.625rem auto 0;
-    line-height: 64px;
-    font-size: 1.875rem;
-    text-align: center;
-    color: #1583ff;
-    border-radius: 35px;
-    border: 2px solid #2b6cef;
-    cursor: pointer;
-}
-.shop-shows {
+
+.conference {
+  background: #072947;
+
+  .b-title,
+  .intro {
+    color: #fff;
+  }
+
+  .shows {
     display: flex;
-    .left {
-        width: 41.25rem;
-        margin-right: 1.25rem;
-        background-color: #fff;
-        cursor: pointer;
-        overflow: hidden;
-        .pic {
-            transition: 0.3s;
-            height: auto;
-            object-fit: cover;
-            &:hover {
-                transform: scale(1.05);
-            }
-        }
-        .texts {
-            padding: 2rem 1.5rem;
-        }
-        h6 {
-            font-size: 1.2rem;
-            color: #272727;
-        }
-        .des {
-            margin-top: 10px;
-            font-size: 0.88rem;
-            color: #666;
-            line-height: 1.714rem;
-        }
+  }
+
+  .left {
+    width: 44.875rem;
+    margin-right: 20px;
+    overflow: hidden;
+    cursor: pointer;
+
+    .pic {
+      transition: 0.3s;
+      height: auto;
+      object-fit: cover;
+
+      &:hover {
+        transform: scale(1.05);
+      }
     }
-    .right {
-        width: 60%;
-        overflow: hidden;
+
+    .texts {
+      display: flex;
+      padding: 3.78rem 1.5rem;
+      background-color: #fff;
     }
-    .show-card {
-        display: flex;
-        margin-bottom: 1.25rem;
-        li {
-            position: relative;
-            height: auto;
-            overflow: hidden;
-            cursor: pointer;
 
-            &:first-child {
-                margin-right: 1.375rem;
-            }
-        }
-        .pic {
-            width: 25rem;
-            height: 12.3125rem;
-            transition: 0.3s;
-            object-fit: cover;
-            &:hover {
-                transform: scale(1.05);
-            }
-        }
-        .text {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            font-size: 0.88rem;
-            color: #fff;
-            padding: 0 1rem;
-            line-height: 48px;
-            text-align: center;
-            @include ellipsis;
-            background: rgba(0, 0, 0, 0.49);
-            box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
-        }
+    .meta {
+      padding: 0.5714rem 1.314rem 0.5714rem 0;
+      margin-right: 1.828rem;
+      text-align: center;
+      border-right: 1px solid #ddd;
     }
-    .card-list {
-        padding: 1.5rem 1.3rem;
-        background-color: #fff;
-        li {
-            display: inline-flex;
-            align-items: center;
-            margin-bottom: 0.9rem;
-            transition: 0.3s;
-            &:hover {
-                transform: scale(1.05);
-            }
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-        .pic {
-            width: 8rem;
-            height: auto;
-            margin-right: 1.5rem;
-            object-fit: cover;
-        }
-        .texts {
-            width: calc(100% - 15rem);
-            margin-right: 3.5rem;
-        }
-        h6 {
-            margin-bottom: 10px;
-            font-size: 1rem;
-            color: #272727;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 1;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-        .des {
-            font-size: 0.7rem;
-            color: #666;
-            line-height: 1.4rem;
-            text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
-            -webkit-line-clamp: 2;
-        }
-        .arrow {
-            width: 2rem;
-        }
+
+    .date {
+      font-size: 2.5714rem;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      color: #1f1f1f;
+      line-height: 2.9714rem;
     }
-}
-.conference {
-    background: #072947;
-    .b-title,
-    .intro {
-        color: #fff;
+
+    .year {
+      font-size: 0.9142rem;
+      white-space: nowrap;
+      color: #666;
     }
-    .shows {
-        display: flex;
+
+    h6 {
+      font-size: 1.1428rem;
+      color: #272727;
     }
-    .left {
-        width: 44.875rem;
-        margin-right: 20px;
-        overflow: hidden;
-        cursor: pointer;
-        .pic {
-            transition: 0.3s;
-            height: auto;
-            object-fit: cover;
-            &:hover {
-                transform: scale(1.05);
-            }
-        }
-        .texts {
-            display: flex;
-            padding: 3.78rem 1.5rem;
-            background-color: #fff;
-        }
-        .meta {
-            padding: 0.5714rem 1.314rem 0.5714rem 0;
-            margin-right: 1.828rem;
-            text-align: center;
-            border-right: 1px solid #ddd;
-        }
-        .date {
-            font-size: 2.5714rem;
-            font-family: DINAlternate-Bold, DINAlternate;
-            font-weight: bold;
-            color: #1f1f1f;
-            line-height: 2.9714rem;
-        }
-        .year {
-            font-size: 0.9142rem;
-            white-space: nowrap;
-            color: #666;
-        }
-        h6 {
-            font-size: 1.1428rem;
-            color: #272727;
-        }
-        .des {
-            margin-top: 10px;
-            font-size: 0.8rem;
-            color: #666;
-            line-height: 1.3714rem;
-        }
+
+    .des {
+      margin-top: 10px;
+      font-size: 0.8rem;
+      color: #666;
+      line-height: 1.3714rem;
     }
-    .card-list {
-        width: 50%;
-        li {
-            display: flex;
-            padding: 0.8rem;
-            margin-bottom: 0.7rem;
-            background-color: #fff;
-            cursor: pointer;
-            align-items: center;
-            transition: 0.3s;
-            height: 9rem;
-            &:last-child {
-                margin-bottom: 0;
-            }
-            &:hover {
-                transform: translateX(20px);
-            }
-        }
-        .pic {
-            width: 10rem;
-            height: auto;
-            margin-right: 1.5rem;
-            object-fit: cover;
-        }
-        .texts {
-            width: calc(100% - 11.5rem);
-        }
-        h6 {
-            margin-bottom: 5px;
-            font-size: 1rem;
-            color: #333;
-            @include ellipsis();
-        }
-        .text {
-            display: flex;
-            align-items: center;
-            &:last-child {
-                margin-bottom: 0;
-            }
-            span {
-                @include ellipsis();
-            }
-        }
-        .icon {
-            margin-right: 5px;
-        }
+  }
+
+  .card-list {
+    width: 50%;
+
+    li {
+      display: flex;
+      padding: 0.8rem;
+      margin-bottom: 0.7rem;
+      background-color: #fff;
+      cursor: pointer;
+      align-items: center;
+      transition: 0.3s;
+      height: 9rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:hover {
+        transform: translateX(20px);
+      }
     }
+
+    .pic {
+      width: 10rem;
+      height: auto;
+      margin-right: 1.5rem;
+      object-fit: cover;
+    }
+
+    .texts {
+      width: calc(100% - 11.5rem);
+    }
+
+    h6 {
+      margin-bottom: 5px;
+      font-size: 1rem;
+      color: #333;
+      @include ellipsis();
+    }
+
+    .text {
+      display: flex;
+      align-items: center;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      span {
+        @include ellipsis();
+      }
+    }
+
+    .icon {
+      margin-right: 5px;
+    }
+  }
 }
 
 @media (max-width: 1200px) {
-    .newsTab {
-        overflow-x: scroll;
-        display: -webkit-box;
+  .newsTab {
+    overflow-x: scroll;
+    display: -webkit-box;
+  }
+
+  .shop-shows {
+    .left {
+      width: 50%;
     }
-    .shop-shows {
-        .left {
-            width: 50%;
-        }
-        .right {
-            width: 48%;
-        }
-        .card-list {
-            .pic {
-                margin-right: 1rem;
-            }
-            .texts {
-                width: calc(100% - 11rem);
-                margin-right: 1rem;
-            }
-        }
+
+    .right {
+      width: 48%;
     }
+
+    .card-list {
+      .pic {
+        margin-right: 1rem;
+      }
+
+      .texts {
+        width: calc(100% - 11rem);
+        margin-right: 1rem;
+      }
+    }
+  }
 }
+
 @media (max-width: 640px) {
-    .block {
-        padding: 50px 0;
-        .inner {
-            .more {
-                width: 100%;
-                margin: 20px auto 0;
-            }
-            .news-banner {
-                flex-direction: column;
-                img {
-                    width: 100%;
-                }
-                .right {
-                    margin-top: 10px;
-                    width: 100%;
-                    .inds {
-                        left: 50%;
-                        margin-left: -43px;
-                    }
-                }
-            }
-            .card {
-                flex-direction: column;
-                .wow {
-                    width: 95%;
-                    margin: 20px auto;
-                }
-            }
-            .b-title {
-                font-size: 20px;
-            }
-            .intro {
-                font-size: 15px;
-                margin-bottom: 50px;
-            }
-        }
-    }
-    .shop-shows {
+  .block {
+    padding: 50px 0;
+
+    .inner {
+      .more {
+        width: 100%;
+        margin: 20px auto 0;
+      }
+
+      .news-banner {
         flex-direction: column;
-        .left {
-            width: 100%;
+
+        img {
+          width: 100%;
         }
+
         .right {
-            width: 100%;
-            margin: 20px auto;
-            .show-card {
-                flex-direction: column;
-                li {
-                    width: 100%;
-                    .pic {
-                        width: 100%;
-                    }
-                }
-            }
-        }
-    }
-    .conference {
-        .shows {
-            flex-direction: column;
+          margin-top: 10px;
+          width: 100%;
+
+          .inds {
+            left: 50%;
+            margin-left: -43px;
+          }
         }
-        .left {
-            width: 100%;
-            margin-right: 0;
+      }
+
+      .card {
+        flex-direction: column;
+
+        .wow {
+          width: 95%;
+          margin: 20px auto;
         }
-        .card-list {
+      }
+
+      .b-title {
+        font-size: 20px;
+      }
+
+      .intro {
+        font-size: 15px;
+        margin-bottom: 50px;
+      }
+    }
+  }
+
+  .shop-shows {
+    flex-direction: column;
+
+    .left {
+      width: 100%;
+    }
+
+    .right {
+      width: 100%;
+      margin: 20px auto;
+
+      .show-card {
+        flex-direction: column;
+
+        li {
+          width: 100%;
+
+          .pic {
             width: 100%;
-            margin-top: 20px;
-            .text {
-                margin-bottom: 4px;
-            }
+          }
         }
+      }
+    }
+  }
+
+  .conference {
+    .shows {
+      flex-direction: column;
+    }
+
+    .left {
+      width: 100%;
+      margin-right: 0;
+    }
+
+    .card-list {
+      width: 100%;
+      margin-top: 20px;
+
+      .text {
+        margin-bottom: 4px;
+      }
     }
+  }
 }
 </style>
\ No newline at end of file