选择角色页面自适应

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ujcms-cp",
+  "name": "sand",
   "version": "2.0.0",
   "private": true,
   "scripts": {

src/styles/index.scss

@@ -40,6 +40,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+  overflow: hidden;
 }
 
 #app {

src/views/Role.vue

@@ -59,22 +59,25 @@
       </el-tooltip>
     </div>
   </div>
-  <div class="relative min-h-[calc(100vh-64px)] bg-[url('@/assets/images/role/bg.png')] bg-[length:100%] bg-no-repeat">
+  <div class="relative h-[calc(100vh-15px)] overflow-auto bg-[#e5eafe]">
+    <img class="w-full"
+         src="@/assets/images/role/bg.png"
+         alt="">
     <div class="absolute top-5 left-[18px] w-[204px] h-[68px] bg-[url('@/assets/images/role/2.png')] bg-[length:100%_100%] bg-no-repeat"></div>
 
     <div class="date absolute top-[70px] left-[54%] w-[198px] h-[46px] pt-[10px] pl-[56px] text-base text-white bg-[url('@/assets/images/role/date.png')] bg-no-repeat cursor-pointer transition hover:bg-[url('@/assets/images/role/date1.png')]"
          @click="dateVisible = true">
       {{ date }}
     </div>
-    <div class="role top-[310px] left-[340px] bg-[url('@/assets/images/role/product.png')] hover:bg-[url('@/assets/images/role/product1.png')]"
+    <div class="role top-[35%] left-[17%] xl:top-[31%] lg:top-[32%] lg:left-[15%] bg-[url('@/assets/images/role/product.png')] hover:bg-[url('@/assets/images/role/product1.png')]"
          @click="selecRole(41)"></div>
-    <div class="role top-[220px] left-[490px] bg-[url('@/assets/images/role/committee.png')] hover:bg-[url('@/assets/images/role/committee1.png')]"
+    <div class="role top-[26%] left-[24%] xl:top-[24%] lg:top-[25%] lg:left-[23%] bg-[url('@/assets/images/role/committee.png')] hover:bg-[url('@/assets/images/role/committee1.png')]"
          @click="selecRole(43)"></div>
-    <div class="role top-[140px] left-[630px] bg-[url('@/assets/images/role/riskControl.png')] hover:bg-[url('@/assets/images/role/riskControl1.png')]"
+    <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="selecRole(42)"></div>
-    <div class="role bottom-[50px] left-[100px] bg-[url('@/assets/images/role/insurance.png')] hover:bg-[url('@/assets/images/role/insurance1.png')]"
+    <div class="role bottom-[100px] 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')]"
          @click="selecRole(275)"></div>
-    <div class="role bottom-[50px] left-[550px] bg-[url('@/assets/images/role/fund.png')] hover:bg-[url('@/assets/images/role/fund1.png')]"
+    <div class="role relative bottom-[70px] left-[25%] bg-[url('@/assets/images/role/fund.png')] hover:bg-[url('@/assets/images/role/fund1.png')]"
          @click="selecRole(1161)"></div>
   </div>
   <!-- <div class="fixed top-[80px] right-[80px]">

tailwind.config.js

@@ -28,10 +28,11 @@ module.exports = {
       ],
     },
     screens: {
+      xl: { 'max': '1680px' },
+      lg: { 'max': '1440px' },
+      lg1: { 'max': '1366px' },
+      md: { 'max': '992px' },
       // sm: '768px',
-      md: '992px',
-      // lg: '1200px',
-      xl: '1536px',
     },
     colors: {
       transparent: 'transparent',