还是样式

src/layouts/Index.vue

@@ -4,7 +4,7 @@
 <template>
     <div class="layout-wrap">
         <div class="header">
-            <template v-if="$route.path!=='/video/list'">
+            <template v-if="!['/video/detail','/video/list'].includes($route.path)">
                 <div class="logo">
                     <img src="~@/assets/img/logo.png"/>
                 </div>
@@ -15,7 +15,7 @@
                     <img src="~@/assets/img/logo2.png"/>
                 </div>
                 <div class="title-video">
-                    <img src="~@/assets/img/title-icon.png"/>
+                    <img src="~@/assets/img/title-icon.png" v-if="$route.path==='/video/list'"/>
                     {{ $route.meta.title }}</div>
             </template>
             <!-- teleport -->

src/views/trainingVideo/Detail.vue

@@ -93,11 +93,11 @@ onUnmounted(()=>{
                         </div>
                     </el-popover>
                 </div>
-                <div class="simple-between" style="margin-top: 20px;">
-                    <span class="simple-center"><el-icon style="margin-right:5px;"><VideoPlay /></el-icon>{{videoData.ViewTotal}}</span>
+                <div class="simple-center" style="margin-top: 20px;">
                     <span>{{videoData.PublishTime}}</span>
+                    <span class="simple-center"><el-icon style="margin: 0 5px 0 15px;"><VideoPlay /></el-icon>{{videoData.ViewTotal}}</span>
                 </div>
-                <p class="introduce">{{videoData.Introduce}}</p>
+                <p class="introduce">{{videoData.Introduce||'暂无简介'}}</p>
             </div>
         </div>
         <div class="video-mobile-box" v-show="route.query.video_code&&offsetWidth<=650">

src/views/trainingVideo/List.vue

@@ -140,7 +140,7 @@ onMounted(()=>{
     <div class="video-list-wrap">
         <div class="select-wrap">
             <div class="classify-box select">
-                <span style="align-self:flex-start;white-space: nowrap;">分类:</span>
+                <span style="align-self:flex-start;white-space: nowrap;padding-top: 8px;">分类:</span>
                 <div class="list" :class="{'expand':isClassifyListExpand}">
                     <span class="list-item" :class="{'active':choosedClassify.ClassifyId===0}"
                         @click="changeClassify({ClassifyId:0})">全部</span>
@@ -165,7 +165,7 @@ onMounted(()=>{
                 </div>
             </div>
             <div class="tag-box select">
-                <span style="align-self:flex-start;white-space: nowrap;">标签:</span>
+                <span style="align-self:flex-start;white-space: nowrap;padding-top: 8px;">标签:</span>
                 <div class="list" :class="{'expand':isTagListExpand}">
                     <span class="list-item" :class="{'active':choosedTags.length===0}"
                         @click="choosedTags = []">全部</span>
@@ -200,24 +200,27 @@ onMounted(()=>{
 
             </div>
         </div>
-        <div class="list-box">
-            <div class="list-item" v-for="item in videoList" :key="item.VideoId" @click="gotoVideoDetail(item)">
-                <div class="list-image" :style="{background:`no-repeat top/contain url('${item.CoverImg}')`}"></div>
-                <h4 class="word-ellipsis">{{item.Title}}</h4>
-                <div class="tag-box">
-                    <span class="tag-item" v-for="tag in item.Tags" :key="tag.TagId">{{tag.TagName}}</span>
+        <div class="list-wrap">
+            <div class="list-box">
+                <div class="list-item" v-for="item in videoList" :key="item.VideoId" @click="gotoVideoDetail(item)">
+                    <div class="list-image" :style="{background:`no-repeat top/contain url('${item.CoverImg}')`}"></div>
+                    <h4 class="word-ellipsis">{{item.Title}}</h4>
+                    <div class="tag-box">
+                        <span class="tag-item" v-for="tag in item.Tags" :key="tag.TagId">{{tag.TagName}}</span>
+                    </div>
+                    <p class="word-ellipsis" style="color:#999999;text-overflow: ellipsis;">{{item.Introduce||'暂无简介'}}</p>
+                    <div class="other">
+                        <span>{{item.PublishTime}}</span>
+                        <el-icon style="margin-left: auto;margin-right:5px;"><VideoPlay /></el-icon>{{item.ViewTotal}}
+                    </div>
                 </div>
-                <p class="word-ellipsis" style="flex:1;color:#999999;text-overflow: ellipsis;">{{item.Introduce||'暂无简介'}}</p>
-                <div class="other">
-                    <span>{{item.PublishTime}}</span>
-                    <el-icon style="margin-left: auto;margin-right:5px;"><VideoPlay /></el-icon>{{item.ViewTotal}}
+                <div class="empty-hint" v-if="videoList.length===0" style="width:100%;text-align: center;color: #999999;">
+                    <img src="~@/assets/img/nodata.png" alt="" style="width: 200px;"/>
+                    <p>{{keyword?`没有找到与${keyword}相关的课程`:'暂无课程'}}</p>
                 </div>
             </div>
-            <div class="empty-hint" v-if="videoList.length===0" style="width:100%;text-align: center;color: #999999;">
-                <img src="~@/assets/img/nodata.png" alt="" style="width: 200px;"/>
-                <p>{{keyword?`没有找到与${keyword}相关的课程`:'暂无课程'}}</p>
-            </div>
         </div>
+        
         <div class="page-box">
             <el-config-provider :locale="zhCn">
                 <el-pagination
@@ -322,26 +325,25 @@ onMounted(()=>{
             }
         }
     }
-    .list-box{
+    .list-wrap{
         margin-top: 20px;
         padding:0 120px;
         flex: 1;
+    }
+    .list-box{
         overflow-y: auto;
         width:100%;
         display: flex;
+        flex-wrap: wrap;
         gap: 20px;
         box-sizing: border-box;
         .list-item{
             width:19%;
-            max-height: 345px;
-            min-height: 300px;
             min-width: 225px;
             box-sizing: border-box;
             padding:10px;
             background-color: #fff;
             border-radius:8px;
-            display: flex;
-            flex-direction: column;
             cursor: pointer;
             .list-image{
                 width:100%;