更新新增综合新闻

src/Layout/tabbar/index.vue

@@ -4,7 +4,7 @@
       <div class="left">
         <div class="logo-box">
           <div class="lesson">
-            <img :src="logoUrl" alt="" />
+            <img :src="logoUrl" alt="" v-default-image="logoImage" />
             <!-- <img src="../../assets/images/LOGO.png" alt=""> -->
           </div>
         </div>
@@ -131,7 +131,7 @@ import themeStore from '@/store/module/theme'
 import Item from './components/item.vue'
 import defaultUserAvater from '@/assets/images/default.png'
 import { Setting } from '@element-plus/icons-vue'
-
+import logoImage from '@/assets/images/LOGO.png'
 const useUserStore = userStore()
 const useSettingStore = settingStore()
 const useThemeStore = themeStore()

src/router/module/constRouter/index.ts

@@ -99,6 +99,16 @@ export const constRouter: any = {
         hidden: false,
       },
     },
+    {
+      path: '/hostNews',
+      name: 'HostNews',
+      component: () => import('@/views/news/hostNews.vue'),
+      meta: {
+        icon: '',
+        title: '综合新闻',
+        hidden: false,
+      },
+    },
     {
       path: 'detail/:id',
       name: 'newsDetail',

src/views/news/hostNews.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <div class="item" v-for="item in 10">
+      <div class="new-iamge">
+        <img src="../../assets/images/news.png" alt="" v-default-image />
+      </div>
+      <div class="new-title">上海一患者在医院停房车维权，称车祸花近百万，屁股整形遇“假专家”</div>
+      <div class="new-time">
+        <div>2023-08-01</div>
+        <div>新闻</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, watch, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const total = ref(0)
+</script>
+
+<style scoped lang="scss">
+.container {
+  width: 1420px;
+  margin: 0 auto;
+  padding-top: 100px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 20px;
+  .item {
+    width: 320px;
+    height: 260px;
+    background-color: var(--card-bg-color);
+    margin-right: 20px;
+    margin-bottom: 20px;
+    cursor: pointer;
+    transition: all 0.3s;
+    border-radius: 5px;
+    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    &:hover {
+      transform: translateY(-5px);
+    }
+    .new-iamge{
+      width: 100%;
+      height: 175px;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .new-title{
+      width: 100%;
+      height: 50px;
+      padding: 0 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      font-size: 16px;
+      font-weight: 700;
+      margin-top: 5px;
+      line-height: 25px;
+    }
+    .new-time{
+      width: 100%;
+      height: 25px;
+      padding: 0 10px;
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      margin-top: 5px;
+      font-size: 12px;
+      color: #999;
+    }
+  }
+}
+</style>