列表菜单

src/components/HeadMenu/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="head-menu">
+    <div class="hm-head-logo" :class="{__hover: AppStore.userInfo?.isAdmin}" @click="switchMenu">
+      <template v-if="AppStore.theme.logo">
+        <img class="logo" :src="AppStore.theme.logo"/>
+      </template>
+      <div class="title">
+        <div class="main-title">{{AppStore.theme.title}}</div>
+        <div class="sub-title" v-if="AppStore.theme.subTitle">{{AppStore.theme.subTitle}}</div>
+      </div>
+    </div>
+    <slot/>
+    <div class="hm-head-user">
+      <div class="avatar">
+        <img src="@/assets/images/web/web-list_avatar.png"/>
+      </div>
+      用户名
+    </div>
+    <div class="hm-head-out __hover" @click="onLoginOut">
+      <SvgIcon name="close_2" color="var(--cus-main-color)" size="20"/>退出
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {useAppStore} from "@/stores";
+
+defineOptions({
+  name: 'HeadMenu',
+});
+import {getCurrentInstance, reactive} from "vue";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {toLogin} from "@/utils/permissions";
+import {useRoute, useRouter} from "vue-router";
+
+const {proxy} = getCurrentInstance()
+const route = useRoute()
+const router = useRouter()
+const AppStore = useAppStore()
+const state: any = reactive({})
+
+const onLoginOut = () => {
+  ElMessageBox.confirm('请确认是否退出登录?', '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+  .then(() => {
+    toLogin()
+  }).catch(() => {})
+}
+const switchMenu = () => {
+  if (AppStore.userInfo?.isAdmin) {
+    if (route.matched[0].name === 'eea02f48-479f-48b1-a4a1-0430070e8bee') {
+      const routerUrl = router.resolve({name: '9d2974b6-5ae9-4e5d-b032-bc2f3f4b1aa4'})
+      window.open(routerUrl.href, "_blank");
+    } else if (route.matched[0].name === '9d2974b6-5ae9-4e5d-b032-bc2f3f4b1aa4') {
+      const routerUrl = router.resolve({name: 'eea02f48-479f-48b1-a4a1-0430070e8bee'})
+      window.open(routerUrl.href, "_blank");
+    }
+  }
+  console.log(route)
+}
+</script>
+
+<style lang="scss" scoped>
+.head-menu {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  height: 72px;
+  background-color: #FFFFFF;
+  padding-right: 24px;
+  .hm-head-logo {
+    display: flex;
+    align-items: center;
+    margin-left: 24px;
+    margin-right: auto;
+    .logo {
+      width: 40px;
+      height: 40px;
+    }
+    .title {
+      margin-left: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      .main-title {
+        font-weight: bold;
+        font-size: 24px;
+        color: var(--cus-text-color-1);
+      }
+      .sub-title {
+        font-weight: 400;
+        font-size: 10px;
+        color: var(--cus-text-color-3);
+      }
+    }
+  }
+  .hm-head-user {
+    display: flex;
+    align-items: center;
+    color: var(--cus-main-color);
+    margin-left: 24px;
+    .avatar {
+      margin-right: 8px;
+    }
+  }
+  .hm-head-out {
+    margin-left: 24px;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    color: var(--cus-main-color);
+    font-weight: 400;
+    font-size: 14px;
+    .svg-icon {
+      margin-right: 4px;
+    }
+  }
+}
+</style>

src/components/cus/CusTable.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="cus-table">
+    <div class="cus-table-table">
+      <el-table
+        v-bind="$attrs"
+        :data="data"
+        :row-key="rowKey"
+      >
+        <el-table-column v-if="selected" type="selection" :width="selectWidth" align="center" :selectable="selectable"/>
+        <el-table-column v-if="singled" :width="singledWidth" align="center" class-name="single-column" fixed="left">
+          <template #default="scope">
+            <div class="single-circle" :class="{active: scope.row[singledKey] === singled[singledKey]}" @click.stop="$emit('update:singled', scope.row)">
+              <div class="single-circle-in"></div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showIndex" type="index" label="序号" align="center" fixed="left" width="60"/>
+        <template v-for="item in tableHead">
+          <el-table-column
+            :prop="item.value"
+            :label="item.label"
+            :align="item.align || 'center'"
+            :fixed="item.fixed || false"
+            :width="item.width"
+            :show-overflow-tooltip="$util.isValue(item.tooltip) ? item.tooltip : true"
+          />
+        </template>
+      </el-table>
+    </div>
+    <div class="cus-table-page">
+      <CusPage
+        :page-num="pageNum"
+        :page-size="pageSize"
+        :total="total"
+        @page="onPage"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'CusTable',
+});
+import {getCurrentInstance, reactive} from "vue";
+
+const {proxy} = getCurrentInstance()
+const props = defineProps({
+  pageNum: {},
+  pageSize: {},
+  total: {},
+  rowKey: {default: 'id'},
+  data: {},
+  selected: {default: null},
+  selectWidth: {default: 50},
+  singledWidth: {default: 50},
+  singled: {default: null},
+  singledKey: {default: 'id'},
+  showIndex: {default: true},
+  selectable: {},
+  tableHead: {default: []}
+})
+const state: any = reactive({})
+
+const onPage = () => {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.cus-table {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .cus-table-table {
+    flex: 1;
+    //:deep(.el-table) {
+    //  height: 100%;
+    //}
+  }
+  .cus-table-page {
+    margin-top: 10px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

src/layout/index.vue

@@ -1,18 +0,0 @@
-<template>
-
-</template>
-
-<script setup lang="ts">
-import RouterViewCom from './router-view.vue'
-import {computed, getCurrentInstance, onMounted, reactive, watch} from "vue";
-import {useRouter, useRoute} from "vue-router";
-
-const {proxy} = getCurrentInstance()
-const router = useRouter()
-const route = useRoute()
-const state: any = reactive({
-})
-</script>
-
-<style lang="scss" scoped>
-</style>

src/router/modules/manage.ts

@@ -1,18 +1,82 @@
+import ManageLayout from '@/views/manage/index.vue'
+import RouterView from "@/layout/router-view.vue";
 // 后台系统
 export default {
   path: '/manage',
   name: '9d2974b6-5ae9-4e5d-b032-bc2f3f4b1aa4',
+  component: ManageLayout,
   redirect: '/manage/home',
   children: [
     {
       path: 'home',
       name: '4786ca99-5235-4691-a0e8-078d0365046b',
       component: () => import('@/views/manage/home/index.vue'),
+      meta: {
+        title: '首页',
+        icon: 'home'
+      }
+    },
+    {
+      path: 'type',
+      name: 'b8cc1ce5-23b9-4661-b794-cdbc96693027',
+      component: () => import('@/views/manage/type/index.vue'),
+      meta: {
+        title: '分类管理',
+        icon: 'type'
+      }
+    },
+    {
+      path: 'index',
+      name: 'af1e2997-e910-4b12-a5a9-69efcba0c1da',
+      component: () => import('@/views/manage/index/index.vue'),
+      meta: {
+        title: '索引管理',
+        icon: 'relation'
+      }
+    },
+    {
+      path: 'theme',
+      name: '13d9ce7a-7f9e-4a3c-941a-376ff68d254c',
+      component: () => import('@/views/manage/theme/index.vue'),
+      meta: {
+        title: '主题设置',
+        icon: 'clothing'
+      }
     },
     {
       path: 'system',
       name: '1c1a19fd-ac7b-42ce-b4eb-0ac978a5dd3d',
-      component: () => import('@/views/manage/system/index.vue'),
+      component: RouterView,
+      meta: {
+        title: '系统管理',
+        icon: 'config'
+      },
+      children: [
+        {
+          path: 'user',
+          name: '41baace0-ab41-4495-bff4-21ed3b3b46a1',
+          component: () => import('@/views/manage/system/user/index.vue'),
+          meta: {
+            title: '用户管理',
+          }
+        },
+        {
+          path: 'role',
+          name: 'fd4b2300-ba92-4c80-8335-648c48e6b46a',
+          component: () => import('@/views/manage/system/role/index.vue'),
+          meta: {
+            title: '角色管理',
+          }
+        },
+        {
+          path: 'path',
+          name: 'fac64bd9-23ac-4e8f-a3e5-7e479a32e00d',
+          component: () => import('@/views/manage/system/log/index.vue'),
+          meta: {
+            title: '日志管理',
+          }
+        },
+      ]
     }
   ]
 }

src/style/cus.scss

@@ -139,7 +139,7 @@
             >div {
               margin-right: 10px;
               height: 28px;
-              border-radius: 28px;
+              border-radius: 4px;
               padding: 0 14px;
               line-height: 1;
               font-size: 14px;
@@ -205,3 +205,29 @@
     }
   }
 }
+
+.__cus-manage_content {
+  width: calc(100% - 48px);
+  height: calc(100% - 48px);
+  margin: 24px;
+  background-color: #ffffff;
+  border-radius: 0 8px 8px 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  .__cus-manage_content-title {
+    height: 42px;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    font-weight: bold;
+    font-size: 16px;
+    color: var(--cus-text-color-1);
+    .svg-icon {
+      margin-right: 6px;
+    }
+  }
+  .__cus-manage_content-main {
+    flex: 1;
+  }
+}

src/style/font/font.scss

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "PingFang SC";
+  src: url("@/style/font/PingFang Regular.ttf");
+}

src/style/index.scss

@@ -1,5 +1,6 @@
 @import './webkit-scrollbar';
 @import './cus';
+@import './font/font';
 
 * {
   outline: none;  // dom元素选中带边框
@@ -7,6 +8,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  font-family: "PingFang SC";
 }
 
 html, body, #app {

src/views/manage/index.vue

@@ -1,15 +1,101 @@
 <template>
-  <div>
-    <h1>这是后台管理</h1>
+  <div class="manage-layout">
+    <HeadMenu class="ml-head">
+      <div class="ml-head-menus">
+        <template v-for="(item, index) in menusCpt">
+          <div v-if="index > 0" class="menu-split"/>
+          <template v-if="item.children?.length > 0">
+            <el-dropdown :teleported="false">
+              <div class="menu-item __hover" :class="{active: validMenuActive(item)}">
+                <SvgIcon :name="item.meta.icon" :color="validMenuActive(item) ? 'var(--cus-main-color)' : 'var(--cus-text-color-2)'" size="20"/>
+                {{item.meta.title}}
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <template v-for="son in item.children">
+                    <el-dropdown-item @click="$router.push({name: son.name})">
+                      <span :style="{color: validMenuActive(son) ? 'var(--cus-main-color)' : 'var(--cus-text-color-2)'}">{{son.meta.title}}</span>
+                    </el-dropdown-item>
+                  </template>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+          <template v-else>
+            <div class="menu-item __hover" :class="{active: validMenuActive(item)}" @click="$router.push({name: item.name})">
+              <SvgIcon :name="item.meta.icon" :color="validMenuActive(item) ? 'var(--cus-main-color)' : 'var(--cus-text-color-2)'" size="20"/>
+              {{item.meta.title}}
+            </div>
+          </template>
+        </template>
+      </div>
+    </HeadMenu>
+    <div class="ml-body">
+      <routerView/>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, reactive} from "vue";
+import {computed, getCurrentInstance, onMounted, reactive} from "vue";
+import routerView from "@/layout/router-view.vue";
+import {useRoute} from "vue-router";
 
+const route = useRoute()
 const {proxy} = getCurrentInstance()
 const state: any = reactive({})
+const menusCpt = computed(() => {
+  return route.matched[0].children
+})
+const validMenuActive = (val) => {
+  if (val.children?.length > 0) {
+    return val.children.some(v => validMenuActive(v))
+  } else {
+    return route.name === val.name
+  }
+}
+onMounted(() => {
+  console.log(route)
+})
 </script>
 
 <style lang="scss" scoped>
+.manage-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .ml-head {
+    .ml-head-menus {
+      display: flex;
+      align-items: center;
+      margin-right: 40px;
+      gap: 16px;
+      .menu-item {
+        display: flex;
+        align-items: center;
+        line-height: 1;
+        font-weight: 400;
+        font-size: 16px;
+        color: var(--cus-text-color-2);
+        position: relative;
+        &.active {
+          color: var(--cus-main-color);
+        }
+        .svg-icon {
+          margin-right: 4px;
+        }
+      }
+      .menu-split {
+        width: 1px;
+        height: 16px;
+        background-color: var(--cus-text-color-4);
+      }
+    }
+  }
+  .ml-body {
+    flex: 1;
+    background-color: #F6F7FB;
+  }
+}
 </style>

src/views/manage/index/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>这是后台-索引管理页面</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive} from "vue";
+
+const {proxy} = getCurrentInstance()
+const state: any = reactive({})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/manage/system/log/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>这是后台-日志管理页面</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive} from "vue";
+
+const {proxy} = getCurrentInstance()
+const state: any = reactive({})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/manage/system/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>这是后台-系统管理页面</h1>
+    <h1>这是后台-角色管理页面</h1>
   </div>
 </template>
 

src/views/manage/system/user/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>这是后台-用户管理页面</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive} from "vue";
+
+const {proxy} = getCurrentInstance()
+const state: any = reactive({})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/manage/theme/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>这是后台-主题设置页面</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive} from "vue";
+
+const {proxy} = getCurrentInstance()
+const state: any = reactive({})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/manage/type/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="__cus-manage_content">
+    <div class="__cus-manage_content-title"><SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>{{$route.meta.title}}</div>
+    <div class="__cus-manage_content-main">
+      <CusTable
+        :page-num="state.query.page.pageNum"
+        :page-size="state.query.page.pageSize"
+        :total="state.query.result.total"
+        :data="state.query.result.data"
+        :table-head="state.query.tableHead"
+      >
+
+      </CusTable>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive} from "vue";
+
+const {proxy} = getCurrentInstance()
+const state: any = reactive({
+  query: {
+    page: {
+      pageNum: 1,
+      pageSize: 10
+    },
+    tableHead: [
+      {value: "a", label: "所属单位2", width: 120},
+      {value: "a", label: "所属单位2", width: 120},
+      {value: "a", label: "所属单位2", width: 120},
+      {value: "a", label: "所属单位2", width: 120},
+      {value: "a", label: "所属单位2", width: 120},
+      {value: "a", label: "所属单位2", width: 120},
+      {value: "a", label: "所属单位2", width: 120},
+      {value: "a", label: "所属单位2", width: 120},
+      {value: "a", label: "所属单位2", width: 120},
+      {value: "a", label: "所属单位2", width: 120},
+      {value: "a", label: "所属单位2", width: 120},
+    ],
+    form: {},
+    result: {
+      total: 0,
+      data: [
+        {a: '驱蚊器大苏打缺点青蛙大全我的期望的求大神的阿斯顿缺点青蛙大全我的钱阿斯顿去', b: '1233132'},
+        {a: '驱蚊器大苏打缺点青蛙大全我的期望的求大神的阿斯顿缺点青蛙大全我的钱阿斯顿去', b: '1233132'},
+        {a: '驱蚊器大苏打缺点青蛙大全我的期望的求大神的阿斯顿缺点青蛙大全我的钱阿斯顿去', b: '1233132'},
+        {a: '驱蚊器大苏打缺点青蛙大全我的期望的求大神的阿斯顿缺点青蛙大全我的钱阿斯顿去', b: '1233132'},
+        {a: '驱蚊器大苏打缺点青蛙大全我的期望的求大神的阿斯顿缺点青蛙大全我的钱阿斯顿去', b: '1233132'},
+        {a: '驱蚊器大苏打缺点青蛙大全我的期望的求大神的阿斯顿缺点青蛙大全我的钱阿斯顿去', b: '1233132'},
+        {a: '驱蚊器大苏打缺点青蛙大全我的期望的求大神的阿斯顿缺点青蛙大全我的钱阿斯顿去', b: '1233132'},
+      ]
+    }
+  }
+
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/web/list/index.vue

@@ -1,15 +1,6 @@
 <template>
   <div class="list">
-    <div class="list-head">
-      <div class="list-head-logo">
-        <template v-if="AppStore.theme.logo">
-          <img class="logo" :src="AppStore.theme.logo"/>
-        </template>
-        <div class="title">
-          <div class="main-title">{{AppStore.theme.title}}</div>
-          <div class="sub-title" v-if="AppStore.theme.subTitle">{{AppStore.theme.subTitle}}</div>
-        </div>
-      </div>
+    <HeadMenu class="list-head">
       <div class="list-head-search">
         <div class="left-select __hover" @click.stop="ref_area.togglePopperVisible(true)">
           搜索范围<SvgIcon name="arrow_1" rotate="90" size="14" color="var(--cus-text-color-3)"/>
@@ -20,13 +11,7 @@
           <SvgIcon name="search_1" color="var(--cus-main-color)" size="40"/>
         </div>
       </div>
-      <div class="list-head-user">
-        <div class="avatar">
-          <img src="@/assets/images/web/web-list_avatar.png"/>
-        </div>
-        用户名
-      </div>
-    </div>
+    </HeadMenu>
     <div class="count-percent" v-if="state.ws.countPercent < 100">
       <div class="bar-bg"><div class="bar-block" :style="{width: state.ws.countPercent + '%'}"/></div>
       已加载{{state.ws.countPercent}}%
@@ -67,13 +52,15 @@
                 <span class="total">({{item.__count}})</span>
                 <SvgIcon class="expend" name="arrow_1" :rotate="item.__expend ? -90 : 90" color="var(--cus-text-color-4)"/>
               </div>
-              <template v-if="item.__expend">
-                <template v-for="son in item.children">
-                  <div class="item-son __hover" :class="{active: son.treeId === state.resultParams.activeIndex}" @click="state.resultParams.activeIndex = son.treeId" v-if="son.__count > 0">
-                    {{son.treeName}}<span class="total">({{son.__count}})</span>
-                  </div>
+              <transition-group name="list" tag="div">
+                <template v-if="item.__expend">
+                  <template v-for="son in item.children">
+                    <div class="item-son __hover" :class="{active: son.treeId === state.resultParams.activeIndex}" @click="state.resultParams.activeIndex = son.treeId" v-if="son.__count > 0">
+                      {{son.treeName}}<span class="total">({{son.__count}})</span>
+                    </div>
+                  </template>
                 </template>
-              </template>
+              </transition-group>
             </div>
           </template>
         </div>
@@ -302,7 +289,7 @@ const tableConfigCpt = computed(() => {
   return {
     listCol: 5,
     listConfig: [
-      {key: '姓名', value: 'name', col: 1},
+      {key: '姓名1', value: 'name', col: 2},
       {key: '性别', value: 'sex', col: 1},
       {key: '出生日期', value: 'a', col: 1},
       {key: '出生日期1', value: 'a', col: 1},
@@ -395,6 +382,36 @@ const getIndexConfig = () => {
       dataShareSource: '海南省大数据管理局1、海南省大数据管理局2、海南省大数据管理局3',
       dataProvideSource: '海南省大数据管理局',
       dataTotal: '9125815819',
+      listCol: 5,
+      listConfig: [
+        {key: '姓名1', value: 'name', col: 2},
+        {key: '性别', value: 'sex', col: 1},
+        {key: '出生日期', value: 'a', col: 1},
+        {key: '出生日期1', value: 'a', col: 1},
+        {key: '出生日期2', value: 'a', col: 3},
+        {key: '出生日期3', value: 'a', col: 1},
+        {key: '出生日期4', value: 'a', col: 1},
+        {key: '出生日期5', value: 'a', col: 1},
+        {key: '出生日期6', value: 'a', col: 1},
+        {key: '出生日期7', value: 'a', col: 1},
+        {key: '出生日期8', value: 'a', col: 1},
+        {key: '出生日期9', value: 'a', col: 1},
+      ],
+      hasCard: true,
+      cardLayout: 3,
+      cardCol: 2,
+      cardMain: {key: '姓名', value: 'name', col: 1},
+      cardImg: {key: '头像', value: 'avatar', isImg: true},
+      cardConfig: [
+        {key: '性别', value: 'sex', col: 1},
+        {key: '出生日期', value: 'a', col: 2},
+        {key: '出生日期1', value: 'a', col: 1},
+        {key: '出生日期2', value: 'a', col: 1},
+        {key: '出生日期3', value: 'a', col: 1},
+        {key: '出生日期4', value: 'a', col: 1},
+        {key: '出生日期5', value: 'a', col: 1},
+        {key: '出生日期6', value: 'a', col: 1},
+      ]
     }
     state.ws.list()
   },500)
@@ -589,38 +606,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   .list-head {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 72px;
-    background-color: #FFFFFF;
-    .list-head-logo {
-      display: flex;
-      align-items: center;
-      margin-left: 24px;
-      .logo {
-        width: 40px;
-        height: 40px;
-      }
-      .title {
-        margin-left: 10px;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        .main-title {
-          font-weight: bold;
-          font-size: 24px;
-          color: var(--cus-text-color-1);
-        }
-        .sub-title {
-          font-weight: 400;
-          font-size: 10px;
-          color: var(--cus-text-color-3);
-        }
-      }
-    }
     .list-head-search {
-      margin-left: auto;
       width: 800px;
       display: flex;
       align-items: center;
@@ -670,15 +656,6 @@ onMounted(() => {
         margin-right: 20px;
       }
     }
-    .list-head-user {
-      display: flex;
-      align-items: center;
-      color: var(--cus-main-color);
-      margin: 0 24px;
-      .avatar {
-        margin-right: 8px;
-      }
-    }
   }
   .count-percent {
     display: flex;
@@ -1129,4 +1106,15 @@ onMounted(() => {
     }
   }
 }
+.list-move, /* 对移动中的元素应用的过渡 */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.1s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+}
+.list-leave-active {
+}
 </style>