页面样式

src/views/update/Index.vue

@@ -3,17 +3,25 @@ import { onMounted , ref , reactive} from 'vue';
 import {apiLogMenu,apiLogList} from '@/api/updateLog';
 
 const MenuList = ref([])
-let logList = reactive([])
+let logList = ref([])
 let activeMenu = ref('')
 function getLogList(dateStr=''){
-    logList = [
+    logList.value = [
         {
             "date_flag": "2023年10月", 
+            expand:true,
             "list": [
                 {
                     "version": "1.0.3", 
                     "content": "<p>aaa</p>", 
-                    "update_date": "2023-10-01" 
+                    "update_date": "2023-10-02" ,
+                    expand:true
+                },
+                {
+                    "version": "1.0.2", 
+                    "content": "<p>aaa</p><p>bbb</p>", 
+                    "update_date": "2023-10-01" ,
+                    expand:true
                 }
             ] 
         }
@@ -31,6 +39,13 @@ function changeActiveMenu(menu){
     activeMenu.value = menu
     getLogList(menu)
 }
+function changeExpand(type,index,itemIndex){
+    if(type==='list'){
+        logList.value[index].expand = !logList.value[index].expand
+    }else{
+        logList.value[index].list[itemIndex].expand = !logList.value[index].list[itemIndex].expand
+    }
+}
 onMounted(()=>{
     getLogMenu()
     getLogList()
@@ -54,16 +69,23 @@ onMounted(()=>{
             </ul>
         </div>
         <div class="right side">
-            <div class="log-list-wrap" v-for="list in logList" :key="list.date_flag">
-                <h2 class="list-title">{{list.date_flag}}<span>></span></h2>
-                <ul class="list">
-                    <li class="list-item" v-for="item in list.list" :key="item.version">
+            <div class="log-list-wrap" v-for="(list,index) in logList" :key="list.date_flag">
+                <h2 class="list-title">{{list.date_flag}}
+                    <el-icon @click="changeExpand('list',index)"
+                        class="icon" :class="{'expand':list.expand}">
+                        <ArrowRight />
+                    </el-icon>
+                    </h2>
+                <ul class="list" v-show="list.expand">
+                    <li class="list-item" v-for="(item,itemIndex) in list.list" :key="item.version">
                         <div class="title">
                             <span>v{{item.version}} 更新日期：{{item.update_date}}</span>
-                            <span>></span>
-                            <el-icon><ArrowRight /></el-icon>
+                            <el-icon @click="changeExpand('item',index,itemIndex)"
+                                class="icon" :class="{'expand':item.expand}">
+                                <ArrowRight />
+                            </el-icon>
                         </div>
-                        <div class="content" v-html="item.content"></div>
+                        <div class="content" v-html="item.content" v-show="item.expand"></div>
                     </li>
                 </ul>
             </div>
@@ -122,6 +144,45 @@ onMounted(()=>{
     .right{
         flex: 1;
         padding:60px;
+        .list-title,.title{
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .icon{
+            cursor: pointer;
+            vertical-align: middle;
+            &.expand{
+                transform: rotate(90deg);
+            }
+        }
+        .list-item{
+            margin-left: 20px;
+            margin-bottom: 30px;
+            position: relative;
+            &::before,&::after{
+                content:'';
+                position:absolute;
+            }
+            &::before{
+                width:4px;
+                height:4px;
+                border-radius: 50%;
+                border:3px solid #366EF4;
+                top:4px;
+                left: -20px;
+            }
+            &::after{
+                width:2px;
+                height:100%;
+                top:22px;
+                left:-16px;
+                background-color: #DCDCDC;
+            }
+        }
+        .content{
+            opacity: 0.6;
+        }
     }
 }
 </style>