menu样式

src/views/update/Index.vue

@@ -1,22 +1,73 @@
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted , ref , reactive} from 'vue';
+import {apiLogMenu,apiLogList} from '@/api/updateLog';
 
+const MenuList = ref([])
+let logList = reactive([])
+let activeMenu = ref('')
+function getLogList(dateStr=''){
+    logList = [
+        {
+            "date_flag": "2023年10月", 
+            "list": [
+                {
+                    "version": "1.0.3", 
+                    "content": "<p>aaa</p>", 
+                    "update_date": "2023-10-01" 
+                }
+            ] 
+        }
+    ]
+}
+function getLogMenu(){
+    MenuList.value = [
+        "2023年10月",
+        "2023年9月",
+        "2023年8月",
+        "2023年7月"
+    ]
+}
+function changeActiveMenu(menu){
+    activeMenu.value = menu
+    getLogList(menu)
+}
 onMounted(()=>{
+    getLogMenu()
+    getLogList()
 })
 </script>
 
 <template>
     <div class="update-log-wrap">
         <div class="left side">
-            <div class="log-title"><strong>更新日志</strong></div>
-           <ul class="log-list">
-                <li>2023年6月</li>
-                <li>2023年5月</li>
-                <li>2023年4月</li>
-                <li>2023年3月</li>
-           </ul>
+            <div class="menu-title" 
+                :class="{'active':activeMenu===''}"
+                @click="changeActiveMenu('')">
+                <strong>更新日志</strong>
+            </div>
+            <ul class="menu-list">
+                <li class="list-item" 
+                    v-for="menu in MenuList" :key="menu"
+                    :class="{'active':menu===activeMenu}"
+                    @click="changeActiveMenu(menu)"
+                    >{{menu}}</li>
+            </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="title">
+                            <span>v{{item.version}} 更新日期：{{item.update_date}}</span>
+                            <span>></span>
+                            <el-icon><ArrowRight /></el-icon>
+                        </div>
+                        <div class="content" v-html="item.content"></div>
+                    </li>
+                </ul>
+            </div>
         </div>
-        <div class="right side">bbb</div>
     </div>
 </template>
 
@@ -32,9 +83,45 @@ onMounted(()=>{
         width:300px;
         border-right: 1px solid #DCDFE6;
         padding:30px;
+        .menu-title{
+            margin-bottom: 20px;
+            cursor: pointer;
+            &.active{
+                color: #366EF4;
+            }
+        }
+        .menu-list{
+            .list-item{
+                padding:10px;
+                position:relative;
+                cursor: pointer;
+                &:not(:last-child){
+                    margin-bottom: 10px;
+                }
+                &:hover{
+                    color: #366EF4;
+                }
+                &.active{
+                    background-color: #F2F6FA;
+                    color: #366EF4;
+                    border-radius: 4px;
+                    overflow: hidden;
+                    &::after{
+                        content:'';
+                        position:absolute;
+                        top:0;
+                        bottom:0;
+                        left:0;
+                        width:4px;
+                        background-color: #366EF4;
+                    }
+                }
+            }
+        }
     }
     .right{
         flex: 1;
+        padding:60px;
     }
 }
 </style>