自适应

.env

@@ -1,9 +1,9 @@
 VITE_APP_TITLE=金融产品设计及数字化营销沙盘
 VITE_PORT=9520
-VITE_PROXY=http://192.168.31.125:8080
+# VITE_PROXY=http://192.168.31.125:8080
 VITE_PUBLIC_PATH=./
 # VITE_BASE_API=http://192.168.31.217:9000
-# VITE_BASE_API=http://121.37.12.51
-VITE_BASE_API=https://www.occupationlab.com
+VITE_BASE_API=http://121.37.12.51
+# VITE_BASE_API=https://www.occupationlab.com
 VITE_I18N_LOCALE=zh-cn
 VITE_I18N_FALLBACK_LOCALE=zh-cn

src/layout/components/AppHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="width-[100%] flex justify-between items-center w-full py-6 px-5 overflow-hidden bg-transparent">
+  <div class="width-[100%] flex justify-between items-center w-full py-6 lg:py-4 px-5 overflow-hidden bg-transparent">
     <logo :collapse="collapse" />
     <div v-if="!hidePanel"
          class="inline-flex items-center">

src/layout/components/AppSidebar/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="switch px-7">
+  <ul class="switch px-7 lg:px-2">
     <!-- 产品经理 -->
     <template v-if="role == 41">
       <el-badge :value="num1">
@@ -172,43 +172,35 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .switch {
+  :deep(.el-badge) {
+    @apply w-full;
+  }
   li {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 122px;
-    height: 102px;
-    margin-bottom: 20px;
-    background: #ffffff;
+    @apply flex flex-col justify-center items-center h-[102px] mb-5 bg-white rounded-[10px] cursor-pointer;
     box-shadow: 0px 0px 8px 0px rgba(162, 199, 246, 0.16);
-    border-radius: 10px;
-    cursor: pointer;
     &:hover,
     &.active {
       background: linear-gradient(-36deg, #3c65ff, #33d1ff);
       box-shadow: 0px 6px 16px 0px rgba(96, 155, 255, 0.56);
       .icon {
-        display: none;
+        @apply hidden;
       }
       .icon-1 {
-        display: inline-block;
+        @apply inline-block;
       }
       .text {
-        color: #fff;
+        @apply text-white;
       }
     }
   }
   img {
-    margin: 0 auto;
+    @apply mx-auto;
   }
   .icon-1 {
-    display: none;
+    @apply hidden;
   }
   .text {
-    margin-top: 10px;
-    font-family: MiSans;
-    font-weight: 600;
+    @apply mt-[10px] font-[MiSans] font-semibold text-base lg:text-sm;
   }
 }
 </style>

src/layout/components/AppSidebar/index.vue

@@ -6,9 +6,9 @@
         <img class="mx-auto"
              src="@/assets/images/6.png"
              alt="" />
-        <p class="text-white text-md">{{ roleName }}</p>
-        <p class="my-2 text-white text-sm">产品部门</p>
-        <div class="flex justify-center items-center text-white text-xs">
+        <p class="text-white text-base lg:text-sm">{{ roleName }}</p>
+        <p class="my-2 text-white text-sm lg:text-xs">产品部门</p>
+        <div class="flex justify-center items-center text-white text-xs lg:text-[10px]">
           虚拟时间：{{ date }}
           <!-- <img class="ml-2 cursor-pointer"
                src="@/assets/images/date.png"

src/layout/components/Logo.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="flex items-center justify-center overflow-hidden">
-    <router-link class="whitespace-nowrap text-center" to="/">
-      <h1 v-if="!collapse" class="ml-1 text-[22px] leading-[1] font-bold text-[#333]">{{ title }}</h1>
+    <router-link class="whitespace-nowrap text-center"
+                 to="/">
+      <h1 v-if="!collapse"
+          class="ml-1 text-[22px] lg:text-lg leading-[1] font-bold text-[#333]">{{ title }}</h1>
     </router-link>
   </div>
 </template>

src/layout/index.vue

@@ -6,9 +6,9 @@
           name="金融产品设计及数字化营销沙盘系统后台管理系统"
           :isLogout="true" />
     <app-sidebar v-if="!hideNav"
-                 class="sidebar fixed w-sidebar h-full px-5 overflow-hidden transition-width duration-300 z-40" />
+                 class="sidebar fixed h-full px-5 overflow-hidden transition-width duration-300 z-40" />
     <div class="main h-[calc(100vh-86px)] transition-margin duration-300 overflow-auto"
-         :class="{ 'ml-sidebar': !hideNav }"
+         :class="{ 'ml': !hideNav }"
          id="appMain">
       <app-main />
     </div>
@@ -56,4 +56,10 @@ export default defineComponent({
   background: url(../assets/images/1.png) 0 0/100% auto no-repeat;
   @apply bg-gray-100;
 }
+.sidebar {
+  @apply w-sidebar lg:w-[160px];
+}
+.ml {
+  @apply ml-sidebar lg:ml-[144px];
+}
 </style>

src/styles/form.scss

@@ -32,14 +32,14 @@
   }
 
   :deep(.el-form-item__label) {
-    @apply font-semibold text-sm leading-[32px] text-black;
+    @apply font-semibold text-sm lg:text-[12px] leading-[32px] text-black;
   }
 
   .field-name {
-    @apply mb-3 text-sm font-semibold leading-[32px] text-[#333];
+    @apply mb-3 text-sm lg:text-[12px] font-semibold leading-[32px] text-[#333];
   }
   .tips {
-    @apply text-sm text-[#686868];
+    @apply text-sm lg:text-xs text-[#686868];
   }
   .num-inputs {
     @apply flex items-center;
@@ -56,7 +56,7 @@
   .radio-wrap {
     @apply flex items-center;
     .label {
-      @apply mr-10;
+      @apply mr-10 lg:text-xs;
     }
     .whether {
       @apply mr-5 text-xs text-[#666];
@@ -65,9 +65,15 @@
       margin-right: 15px;
     }
   }
+  :deep(.el-input),
+  :deep(.el-textarea),
+  :deep(.el-radio__label),
+  :deep(.el-checkbox__label) {
+    @apply lg:text-xs;
+  }
 }
 .submit {
-  @apply py-[15px] px-[22px] mt-5 text-sm leading-none text-white bg-[#006bff] rounded-xl cursor-pointer;
+  @apply py-[15px] px-[22px] lg:py-[10px] lg:px-[15px] mt-5 text-sm lg:text-xs leading-none text-white bg-[#006bff] rounded-xl cursor-pointer;
   &:hover {
     @apply opacity-90;
   }

src/styles/index.scss

@@ -74,12 +74,12 @@ body {
 
 .card-list {
   .left {
-    @apply w-[241px] min-w-[241px] pr-5 py-4 border-r border-solid border-[#e9eff2];
+    @apply w-[241px] min-w-[241px] lg:w-[180px] lg:min-w-[180px] pr-5 py-4 border-r border-solid border-[#e9eff2];
   }
   .products {
     @apply max-h-[calc(100vh-150px)] pr-1 overflow-auto;
     li {
-      @apply relative p-5 pt-7 mb-5 rounded-[10px] cursor-pointer border border-solid border-[transparent] bg-[url('@/assets/images/10.png')] bg-[length:100%_100%] bg-no-repeat;
+      @apply relative p-5 pt-7 lg:p-4 mb-5 rounded-[10px] cursor-pointer border border-solid border-[transparent] bg-[url('@/assets/images/10.png')] bg-[length:100%_100%] bg-no-repeat;
       &.active {
         @apply border-[#519aff];
       }
@@ -88,14 +88,14 @@ body {
       @apply absolute top-0 right-0;
     }
     h6 {
-      @apply text-[#14436b] font-semibold;
+      @apply text-[#14436b] font-semibold lg:text-[15px];
     }
     .type,
     .status {
-      @apply my-[15px] text-sm text-[#333];
+      @apply my-[15px] lg:mt-2 text-sm lg:text-xs text-[#333];
     }
     .meta {
-      @apply mt-[15px] text-sm text-[#8798a9];
+      @apply mt-[15px] lg:mt-2 text-sm lg:text-xs text-[#8798a9];
     }
   }
   .right {
@@ -113,6 +113,10 @@ body {
   th.el-table__cell > .cell {
     @apply text-[#006BFF];
   }
+  .cell,
+  .el-input {
+    @apply lg:text-xs;
+  }
   .el-input__inner {
     @apply px-2;
   }

src/views/Role.vue

@@ -74,7 +74,7 @@
          @click="selectRole(43)"></div>
     <div class="role top-[17%] left-[31.5%] xl:top-[16%] xl:left-[31%] lg:left-[30%] bg-[url('@/assets/images/role/riskControl.png')] hover:bg-[url('@/assets/images/role/riskControl1.png')]"
          @click="selectRole(42)"></div>
-    <div class="role bottom-[200px] left-[100px] xl:bottom-[150px] lg:bottom-[120px] lg1:bottom-[20px] bg-[url('@/assets/images/role/insurance.png')] hover:bg-[url('@/assets/images/role/insurance1.png')]"
+    <div class="role bottom-[200px] left-[100px] xl:bottom-[150px] lg:bottom-[120px] bg-[url('@/assets/images/role/insurance.png')] hover:bg-[url('@/assets/images/role/insurance1.png')]"
          @click="selectRole(275)"></div>
     <div class="role relative bottom-[70px] left-[25%] bg-[url('@/assets/images/role/fund.png')] hover:bg-[url('@/assets/images/role/fund1.png')]"
          @click="selectRole(1161)"></div>

src/views/product/strategy/CardList.vue

@@ -140,7 +140,7 @@ const list1 = ref<Array<Record<string, any>>>([]);
 const list2 = ref<Array<Record<string, any>>>([]);
 const id = computed(() => +route.query.id);
 const creditId = computed(() => +route.query.creditId);
-const riskId = ref<number>(702);
+const riskId = ref<number>();
 
 // 准入策略切换
 const switchProduct = (id: number) => {
@@ -191,7 +191,8 @@ const toAdd = () => {
   router.push(`/product/strategy?i=${route.query.i}&role=${route.query.role}&add=1`);
 };
 // tab切换回调
-const tabChange = (tab: TabsPaneContext, event: Event) => {
+const tabChange = () => {
+  if (curTab.value === 'tab3') riskId.value = 702;
   getList();
 };
 </script>

src/views/product/strategy/Risk1.vue

@@ -95,7 +95,8 @@ const getDetail = async (load?: number) => {
     const { data } = await detailRick(1);
     info.value = data;
     getConfig();
-  } finally {
+  } catch (e) {
+    if (loading) loading.close();
   }
 };
 onMounted(() => {

src/views/product/strategy/Risk2.vue

@@ -95,7 +95,8 @@ const getDetail = async (load?: number) => {
     } else {
       getConfig();
     }
-  } finally {
+  } catch (e) {
+    if (loading) loading.close();
   }
 };
 onMounted(() => {

src/views/product/strategy/Risk3.vue

@@ -88,7 +88,8 @@ const getDetail = async (load?: number) => {
     } else {
       getConfig();
     }
-  } finally {
+  } catch (e) {
+    if (loading) loading.close();
   }
 };
 onMounted(() => {

tailwind.config.js

@@ -30,7 +30,6 @@ module.exports = {
     screens: {
       xl: { 'max': '1680px' },
       lg: { 'max': '1440px' },
-      lg1: { 'max': '1366px' },
       md: { 'max': '992px' },
       // sm: '768px',
     },