修改赛事推广

src/views/main/one.vue

@@ -6,96 +6,155 @@
           <el-image class="image" :src="home" fit="fill" />
         </el-col>
         <div class="w_1200" v-loading="loading">
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">
-              <el-col :span="12" class="left">政策信息</el-col>
-              <el-col :span="12" class="right" @click="selectMenu('brain')">查看政策信息</el-col>
-            </el-col>
-            <el-col :span="24" class="one_2">
-              <el-col
-                :span="12"
-                class="list"
-                v-for="(item, index) in newsList"
-                :key="index"
-                @click="toView(item)"
-              >
-                <el-col :span="4" class="left">
-                  <div class="year" v-if="item.time">{{ moment(item.time).format('YYYY') }}</div>
-                  <div class="date" v-if="item.time">{{ moment(item.time).format('MM-DD') }}</div>
+          <el-row :gutter="20">
+            <el-col :span="18" class="oneLeft">
+              <el-col :span="24" class="one">
+                <el-col :span="24" class="one_1">
+                  <el-col :span="12" class="left">政策信息</el-col>
+                  <el-col :span="12" class="right" @click="selectMenu('brain')"
+                    >查看政策信息</el-col
+                  >
                 </el-col>
-                <el-col :span="20" class="right">
-                  <el-col :span="24" class="name textOver">
-                    <el-tooltip effect="dark" :content="item.title" placement="top">
-                      {{ item.title || '暂无标题' }}
-                    </el-tooltip>
-                  </el-col>
-                  <el-col :span="24" class="content">
-                    <div v-html="removeHtmlStyle(item.content)"></div>
+                <el-col :span="24" class="one_2">
+                  <el-col
+                    :span="24"
+                    class="list"
+                    v-for="(item, index) in newsList"
+                    :key="index"
+                    @click="toView(item, '0')"
+                  >
+                    <el-col :span="2" class="left">
+                      <div class="year" v-if="item.time">
+                        {{ moment(item.time).format('YYYY') }}
+                      </div>
+                      <div class="date" v-if="item.time">
+                        {{ moment(item.time).format('MM-DD') }}
+                      </div>
+                    </el-col>
+                    <el-col :span="22" class="right">
+                      <el-col :span="24" class="name textOver">
+                        <el-tooltip effect="dark" :content="item.title" placement="top">
+                          {{ item.title || '暂无标题' }}
+                        </el-tooltip>
+                      </el-col>
+                      <el-col :span="24" class="content">
+                        <div v-html="removeHtmlStyle(item.content)"></div>
+                      </el-col>
+                    </el-col>
                   </el-col>
                 </el-col>
               </el-col>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">
-              <el-col :span="12" class="left">新闻通知</el-col>
-              <el-col :span="12" class="right" @click="selectMenu('brain')">查看新闻通知</el-col>
-            </el-col>
-            <el-col :span="24" class="one_2">
-              <el-col
-                :span="12"
-                class="list"
-                v-for="(item, index) in newsList"
-                :key="index"
-                @click="toView(item)"
-              >
-                <el-col :span="4" class="left">
-                  <div class="year" v-if="item.time">{{ moment(item.time).format('YYYY') }}</div>
-                  <div class="date" v-if="item.time">{{ moment(item.time).format('MM-DD') }}</div>
+              <el-col :span="24" class="one">
+                <el-col :span="24" class="one_1">
+                  <el-col :span="12" class="left">新闻通知</el-col>
+                  <el-col :span="12" class="right" @click="selectMenu('brain')"
+                    >查看新闻通知</el-col
+                  >
                 </el-col>
-                <el-col :span="20" class="right">
-                  <el-col :span="24" class="name textOver">
-                    <el-tooltip effect="dark" :content="item.title" placement="top">
-                      {{ item.title || '暂无标题' }}
-                    </el-tooltip>
-                  </el-col>
-                  <el-col :span="24" class="content">
-                    <div v-html="removeHtmlStyle(item.content)"></div>
+                <el-col :span="24" class="one_2">
+                  <el-col
+                    :span="24"
+                    class="list"
+                    v-for="(item, index) in newsList"
+                    :key="index"
+                    @click="toView(item, '0')"
+                  >
+                    <el-col :span="2" class="left">
+                      <div class="year" v-if="item.time">
+                        {{ moment(item.time).format('YYYY') }}
+                      </div>
+                      <div class="date" v-if="item.time">
+                        {{ moment(item.time).format('MM-DD') }}
+                      </div>
+                    </el-col>
+                    <el-col :span="22" class="right">
+                      <el-col :span="24" class="name textOver">
+                        <el-tooltip effect="dark" :content="item.title" placement="top">
+                          {{ item.title || '暂无标题' }}
+                        </el-tooltip>
+                      </el-col>
+                      <el-col :span="24" class="content">
+                        <div v-html="removeHtmlStyle(item.content)"></div>
+                      </el-col>
+                    </el-col>
                   </el-col>
                 </el-col>
               </el-col>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">
-              <el-col :span="12" class="left">工作动态</el-col>
-              <el-col :span="12" class="right" @click="selectMenu('brain')">查看工作动态</el-col>
-            </el-col>
-            <el-col :span="24" class="one_2">
-              <el-col
-                :span="12"
-                class="list"
-                v-for="(item, index) in newsList"
-                :key="index"
-                @click="toView(item)"
-              >
-                <el-col :span="4" class="left">
-                  <div class="year" v-if="item.time">{{ moment(item.time).format('YYYY') }}</div>
-                  <div class="date" v-if="item.time">{{ moment(item.time).format('MM-DD') }}</div>
+              <el-col :span="24" class="one">
+                <el-col :span="24" class="one_1">
+                  <el-col :span="12" class="left">工作动态</el-col>
+                  <el-col :span="12" class="right" @click="selectMenu('brain')"
+                    >查看工作动态</el-col
+                  >
                 </el-col>
-                <el-col :span="20" class="right">
-                  <el-col :span="24" class="name textOver">
-                    <el-tooltip effect="dark" :content="item.title" placement="top">
-                      {{ item.title || '暂无标题' }}
-                    </el-tooltip>
-                  </el-col>
-                  <el-col :span="24" class="content">
-                    <div v-html="removeHtmlStyle(item.content)"></div>
+                <el-col :span="24" class="one_2">
+                  <el-col
+                    :span="24"
+                    class="list"
+                    v-for="(item, index) in newsList"
+                    :key="index"
+                    @click="toView(item, '0')"
+                  >
+                    <el-col :span="2" class="left">
+                      <div class="year" v-if="item.time">
+                        {{ moment(item.time).format('YYYY') }}
+                      </div>
+                      <div class="date" v-if="item.time">
+                        {{ moment(item.time).format('MM-DD') }}
+                      </div>
+                    </el-col>
+                    <el-col :span="22" class="right">
+                      <el-col :span="24" class="name textOver">
+                        <el-tooltip effect="dark" :content="item.title" placement="top">
+                          {{ item.title || '暂无标题' }}
+                        </el-tooltip>
+                      </el-col>
+                      <el-col :span="24" class="content">
+                        <div v-html="removeHtmlStyle(item.content)"></div>
+                      </el-col>
+                    </el-col>
                   </el-col>
                 </el-col>
               </el-col>
             </el-col>
-          </el-col>
+            <el-col :span="6" class="oneRight">
+              <el-col :span="24" class="carousel">
+                <a-carousel autoplay>
+                  <el-image
+                    v-for="(item, index) in carouselList"
+                    :key="index"
+                    class="image"
+                    :src="item.url"
+                    fit="fill"
+                  />
+                </a-carousel>
+              </el-col>
+              <el-col :span="24" class="title">
+                <el-col :span="16" class="left">赛事推广 </el-col>
+                <el-col :span="8" class="right" @click="toMore"> 查看更多</el-col>
+              </el-col>
+              <el-col :span="24" class="content">
+                <el-col
+                  :span="24"
+                  v-for="(item, index) in matchList"
+                  :key="index"
+                  @click="toView(item, '1')"
+                  class="list"
+                >
+                  <el-image
+                    v-if="item.file && item.file.length > 0"
+                    class="image"
+                    :src="item.file[0].url"
+                    fit="cover"
+                  />
+                  <el-image v-else class="image" :src="match" fit="fill" />
+                  <div class="name">
+                    {{ item.name }}
+                  </div>
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-row>
         </div>
       </el-col>
     </el-row>
@@ -107,35 +166,58 @@ import moment from 'moment'
 const selectMenu = inject('selectMenu')
 // 图片引入
 import home from '/images/home.jpg'
+import match from '/images/match.jpg'
+import match1 from '/images/match_1.jpg'
+import match2 from '/images/match_2.jpg'
+import match3 from '/images/match_3.jpg'
+import match4 from '/images/match_4.jpg'
 // 接口
 import { NewsStore } from '@/store/api/platform/news'
+import { MatchStore } from '@/store/api/platform/match'
 const newsStore = NewsStore()
+const matchStore = MatchStore()
 // 路由
 const router = useRouter()
 // 加载中
 const loading = ref(false)
 // 新闻
 const newsList = ref([])
+// 比赛
+const matchList = ref([])
+
+const carouselList = ref([{ url: match1 }, { url: match2 }, { url: match3 }, { url: match4 }])
 // 请求
 onMounted(async () => {
   loading.value = true
   await searchNews()
+  await searchMatch()
   loading.value = false
 })
 const searchNews = async () => {
   const info = {
     skip: 0,
-    limit: 6,
+    limit: 4,
     is_use: '0',
     status: '1'
   }
   const res = await newsStore.query(info)
   if (res.errcode == '0') newsList.value = res.data
 }
+const searchMatch = async () => {
+  const info = {
+    skip: 0,
+    limit: 6,
+    is_use: '0',
+    status: '1'
+  }
+  const res = await matchStore.query(info)
+  if (res.errcode == '0') matchList.value = res.data
+}
 
 // 查看详情
-const toView = (item) => {
-  router.push({ path: '/news/detail', query: { id: item.id || item._id } })
+const toView = (item, type) => {
+  if (type == '0') router.push({ path: '/news/detail', query: { id: item.id || item._id } })
+  else router.push({ path: '/innovation/detail', query: { id: item.id || item._id } })
 }
 const removeHtmlStyle = (html) => {
   let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g //去除样式
@@ -149,6 +231,10 @@ const removeHtmlStyle = (html) => {
   }
   return newHtml
 }
+// 查看更多
+const toMore = () => {
+  router.push({ path: `/five` })
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -200,16 +286,17 @@ const removeHtmlStyle = (html) => {
 
       .list {
         display: flex;
-        justify-content: space-between;
         align-items: center;
         padding: 15px;
         transition: all 0.3s;
+        border-bottom: #9d9898 1px dashed;
 
         .left {
           font-family: PingFangSC-Regular;
           font-size: 12px;
           color: #2374ff;
           line-height: 12px;
+          padding: 0 !important;
 
           .year {
             margin-bottom: 2px;
@@ -223,6 +310,7 @@ const removeHtmlStyle = (html) => {
         }
 
         .right {
+          padding: 0 !important;
           .name {
             font-family: PingFangSC-Medium;
             font-size: 16px;
@@ -254,5 +342,82 @@ const removeHtmlStyle = (html) => {
       }
     }
   }
+  .oneRight {
+    padding: 25px 0 0 0 !important;
+    .carousel {
+      padding: 0 !important;
+      margin: 0 0 10px 0;
+      border-radius: 4px;
+      :deep(.slick-slide) {
+        text-align: center;
+        height: 220px;
+        background: #364d79;
+        overflow: hidden;
+        border-radius: 4px;
+      }
+      .image {
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+      }
+    }
+
+    .title {
+      padding: 0 !important;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: linear-gradient(90deg, #d7e8ff, #fff);
+      width: 300px;
+      height: 64px;
+      padding-left: 21px;
+      box-sizing: border-box;
+      margin-bottom: 7px;
+      .left {
+        font-size: 20px;
+        font-family:
+          PingFangSC-Medium,
+          PingFang SC;
+        font-weight: 500;
+        color: #111;
+        line-height: 20px;
+      }
+      .right {
+        text-align: right;
+        font-size: 14px;
+        font-family:
+          PingFangSC-Regular,
+          PingFang SC;
+        font-weight: 400;
+        color: #666;
+        cursor: pointer;
+      }
+    }
+    .content {
+      padding: 0 !important;
+      margin: 10px 0 0 0;
+      .list {
+        padding: 0 !important;
+        background: #eff4f9;
+        width: 100%;
+        margin: 0 0 10px 0;
+        border-radius: 4px;
+        .image {
+          width: 100%;
+          height: 150px;
+          border-radius: 4px 4px 0 0;
+        }
+        .name {
+          padding: 10px;
+          font-size: 14px;
+          font-family:
+            PingFangSC-Medium,
+            PingFang SC;
+          font-weight: 500;
+          color: #111;
+        }
+      }
+    }
+  }
 }
 </style>