更改列表页样式

src/views/chartETA/List.vue

@@ -35,9 +35,10 @@ function catalogItemClick({item,type='node',parent}){
     listState.page=1
     getChartList()
 }
-//目录操作栏被点击
-function showFileOptClick(node){
+//目录操作栏被点击,处理事件
+function showFileOptClick({node,opt}){
     console.log('a,node:',node)
+    console.log('b,opt',opt)
 }
 //图表列表
 const listState = reactive({
@@ -86,17 +87,21 @@ getChartList()
                     shape="round" 
                     readonly 
                     placeholder="请输入图表名称"
-                    style="flex:1"
+                    style="flex:1;padding-left:0"
                     @click-input="goSearch"
                 />
-                <div class="lang-icon icon">en</div>
-                <div class="list-icon icon" @click="showCatalog">list</div>
+                <div class="lang-icon icon">
+                    <img src="@/assets/imgs/chartETA/lang-icon.png" alt="">
+                </div>
+                <div class="list-icon icon" @click="showCatalog">
+                    <img src="@/assets/imgs/chartETA/list-icon.png" alt="">
+                </div>
             </div>
             <div class="select-box">
                 <p>
                     <span style="margin-right: 5px;font-weight: bold;">{{ catalogMenu }}</span>
                     共{{listState.total}}张图表</p>
-                <span> <van-checkbox v-model="listState.IsShowMe" shape="square">只看我的</van-checkbox></span>
+                <span> <van-checkbox v-model="listState.IsShowMe">只看我的</van-checkbox></span>
             </div>
         </div>
         <div class="chart-list-wrap">
@@ -119,7 +124,9 @@ getChartList()
                         <img class="img" :src="item.ChartImage" alt="">   
                         <div class="time">
                             <span>创建时间：{{item.CreateTime.slice(0,10)}}</span>
-                            <span class="tool-icon"></span>
+                            <span class="tool-icon">
+                                <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
+                            </span>
                         </div>
                     </li>
                 </ul>
@@ -128,9 +135,9 @@ getChartList()
         <!-- 目录列表 -->
         <van-popup v-model:show="IsShowCatalog" position="right" class="catalog-list-wrap" style="height:100%">
             <div class="catalog-list">
-                <div class="top">
-                    <h3>选择分类</h3>
-                    <span class="close-icon">X</span>
+                <div class="top sticky-part">
+                    <h3>分类</h3>
+                    <van-icon name="cross" @click.stop="IsShowCatalog=false"/>
                 </div>
                 <div class="list-box">
                     <CatalogTree 
@@ -139,11 +146,14 @@ getChartList()
                         @handleCatalogItemClick="catalogItemClick"
                     />
                 </div>
-                <div class="bottom">
+                <div class="bottom sticky-part">
                     <span>添加图表分类</span>
                 </div>
             </div>
         </van-popup>
+        <!-- 添加/重命名一二级分类 弹窗 -->
+        <!-- 移动至 弹窗-->
+        <!-- 加入我的图库 弹窗 -->
     </div>
 </template>
 <style lang="scss">
@@ -153,7 +163,7 @@ getChartList()
     }
     @media screen and (min-width:$media-width){
         .catalog-list-wrap{
-            width: 20%;
+            width: 30%;
         }
     }
 }
@@ -161,7 +171,7 @@ getChartList()
 <style scoped lang="scss">
 .chart-eta-list-wrap{
     .select-wrap{
-        padding: 0 30px;
+        padding: 30px;
         position: sticky;
         top:0;
         background-color: #fff;
@@ -170,6 +180,17 @@ getChartList()
             align-items: center;
             .icon{
                 margin-left: 10px;
+                width: 70px;
+                height:70px;
+                background-color: #F2F3FF;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                img{
+                    width:45px;
+                    height:45px;
+                }
             }
         }
         .select-box{
@@ -178,19 +199,20 @@ getChartList()
         }
     }
     .chart-list-wrap{
-        margin-top:15px;
+        //margin-top:15px;
         padding: 0 30px; 
         padding-bottom: 30px;
         .chart-list{
             display: flex;
             justify-content: space-between;
             flex-wrap: wrap;
-            gap: 10px 0;
+            gap: 30px 0;
             .chart-list-item{
                 box-sizing: border-box;
                 width: 330px;
                 padding: 10px 14px;
                 border: 1px solid $border-color;
+                border-radius: 12px;
                 .title{
                     min-height: 70px;
                     overflow: hidden;
@@ -207,39 +229,84 @@ getChartList()
                         margin: 10px 0;
                     }
                 .time{
+                    display: flex;
+                    justify-content: space-between;
                     font-size: 14px;
                     color: $font-grey_999;
+                    .tool-icon>img{
+                        width:5px;
+                    }
                 }
+                
             }
         }
     }
     .catalog-list{
         box-sizing: border-box;
         height: 100%;
+        .sticky-part{
+            position:sticky;
+            background-color: white;
+            z-index: 99;
+            left:0;
+            right:0;
+        }
         .top{
             display: flex;
             justify-content: space-between;
-            border-bottom: 1px solid black;
+            border-bottom: 1px solid #DCDFE6;
             padding: 0 15px;
             align-items: center;
+            top:0;
+        }
+        .bottom{
+            display: flex;
+            padding:48px;
+            bottom:0;
+            span{
+                flex: 1;
+                background-color: #0052D9;
+                color: white;
+                text-align: center;
+                border-radius: 6px;
+                padding:16px;
+                box-sizing: border-box;
+            }
         }
     }
 
     @media screen and (min-width:$media-width){
         .select-wrap{
             top:60px;
+            padding:30px;
+            .search-box{
+                .icon{
+                    margin-left: 10px;
+                    width: 40px;
+                    height:40px;
+                    background-color: #F2F3FF;
+                    border-radius: 50%;
+                    img{
+                        width:25px;
+                        height:25px;
+                    }
+                }
+            }
+            .select-box{
+                margin-top:20px;
+            }
         }
         .chart-list-wrap{
-            //margin-top:10px;
-            
+            padding:0 30px;
             .chart-list{
-                gap: 10px 5%;
+                gap: 20px 4%;
                 justify-content:flex-start;
                 .chart-list-item{
                     box-sizing: border-box;
-                    width: 30%;
+                    width: 22%;
                     padding: 10px 14px;
                     border: 1px solid $border-color;
+                    border-radius: 6px;
                     .title{
                         min-height: 36px;
                     }
@@ -251,10 +318,29 @@ getChartList()
                     }
                     .time{
                         font-size: 14px;
+                        .tool-icon>img{
+                            width:3px;
+                        }
                     }
                 }
             }
         }
+        .catalog-list{
+            .bottom{
+                display: flex;
+                padding:24px;
+                bottom:0;
+                span{
+                    flex: 1;
+                    background-color: #0052D9;
+                    color: white;
+                    text-align: center;
+                    border-radius: 6px;
+                    padding:8px;
+                    box-sizing: border-box;
+                }
+            }
+        }
     }
 }
 </style>

src/views/chartETA/components/CatalogItem.vue

@@ -14,58 +14,64 @@ const props = defineProps({
         default:[]
     }
 })
-/* const emits=defineEmits(['showFileOptClick'])
-function handleShowFileOptClick(){
-    emits('showFileOptClick',props.node)
-} */
-const showPopover = ref(false)
+
+const emits=defineEmits(['showFileOptClick'])
+const showPopup = ref(false)
 function fileOptClick(opt){
-    showPopover.value = false
-    console.log('opt:',opt)
+    showPopup.value = false
+    emits('showFileOptClick',{node:props.node,opt})
 }
 </script>
 
 <template>
-    <div class="catalog-item">
-        <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="" v-if="showFileImg">
-        <span class="van-ellipsis">{{node.ChartClassifyName||''}}</span>
-        <div @click.stop>
-            <!-- <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt=""> -->
-            <van-popover placement="bottom-end" v-model:show="showPopover">
-                <template #reference>
-                    <div class="menu-icon">
-                        <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
-                    </div>
-                </template>
+    <div class="catalog-item" :class="{'leaf-padding':!showFileImg}">
+        <span class="van-ellipsis" :class="{'leaf-padding':!showFileImg}">{{node.ChartClassifyName||''}}</span>
+        <div @click.stop="showPopup=true">
+            <div class="menu-icon">
+                <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
+            </div>
+            <van-popup v-model:show="showPopup" round position="bottom" teleport=".chart-eta-list-wrap">
                 <div class="catalog-file-opt-box">
                     <div class="opt-item" v-for="opt in optArr" :key="opt.label" @click="fileOptClick(opt)">
-                        <img :src="opt.icon" alt="">
                         <span>{{opt.label}}</span>
                     </div>
+                    <div class="opt-item last" @click="fileOptClick({id:'cancel'})">
+                        <span>确定</span>
+                    </div>
                 </div>
-            </van-popover>
+            </van-popup>
         </div>
     </div>
 </template>
 
 <style lang="scss">
 .catalog-file-opt-box{
+    background-color: #F6F6F6;
     .opt-item{
         display: flex;
-        padding:5px 15px;
-        gap:10px;
+        padding:32px;
         align-items: center;
+        justify-content: center;
         border-bottom: 1px solid $border-color;
+        background-color: #FFFFFF;
         img{
             width:44px;
         }
         span{
             white-space: nowrap;
         }
+        &.last{
+            border-bottom: none;
+            margin-top:16px;
+        }
         @media screen and (min-width:$media-width){
+            padding:16px;
             img{
                 width:32px;
             }
+            &.last{
+                margin-top: 8px;
+            }
         }
     }
 }
@@ -76,11 +82,17 @@ function fileOptClick(opt){
     align-items: center;
     justify-content: space-between;
     overflow: hidden;
+    &.leaf-padding{
+        padding: var(--van-cell-vertical-padding) 0;
+    }
     span{
         flex: 1;
-        text-align: center;
+        text-align: left;
         box-sizing: border-box;
         padding: 0 15px;
+        &.leaf-padding{
+            padding:0 30px;
+        }
     }
     img{
         display: inline-block;
@@ -94,13 +106,17 @@ function fileOptClick(opt){
     .menu-icon{
         width: 30px;
         text-align: center;
+        img{
+            transform: rotate(90deg);
+            transform-origin: left;
+        }
         
     }
     @media screen and (min-width:$media-width){
         img{
             width: 32px;
             &.icon{
-                width:6px;
+                width:4px;
             }
         }
     }

src/views/chartETA/components/CatalogTree.vue

@@ -27,7 +27,7 @@ function handleCatalogItemClick(item,type,node){
                 v-for="node in catalogNodes"
                 :key="node.UniqueCode"
                 :name="node.UniqueCode"
-                :is-link="false"
+                :is-link="true"
                 @click.stop="handleCatalogItemClick(node)"
             >
             <template #title>
@@ -54,5 +54,19 @@ function handleCatalogItemClick(item,type,node){
 </template>
 
 <style lang="scss">
-
+.catalog-tree-wrap{
+    .van-collapse{
+        .van-collapse-item{
+            >.van-cell{
+                flex-direction: row-reverse;
+            }
+            .van-collapse-item__wrapper{
+                .van-collapse-item__content{
+                    padding-top: 0;
+                    padding-bottom: 0;
+                }
+            }
+        }
+    }
+}
 </style>

src/views/tabbar/Home.vue

@@ -70,7 +70,7 @@ const menuConfig=[
         key:'ETA图库',
         level:1,
         path:'/chartETA/list',
-        icon:getStaticImg('myETA/icon_myETA_logo.png'),
+        icon:getStaticImg('chartETA/icon_chartETA_logo.png'),
         show:false
     }
 ]