huoran
/
FE_sandTable
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

选择角色页面自适应

Browse Source
V0.1
yujialong 12 months ago
parent 8243d5d849
commit 39d6ce5588
4 changed files with 15 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 1
      src/styles/index.scss
  3. 15
      src/views/Role.vue
  4. 7
      tailwind.config.js

2
package.json
Unescape View File

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

1
src/styles/index.scss
Unescape View File

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

15
src/views/Role.vue
Unescape View File

@ -59,22 +59,25 @@
</el-tooltip> </el-tooltip>
</div> </div>
</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="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')]" <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"> @click="dateVisible = true">
{{ date }} {{ date }}
</div> </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> @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> @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> @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> @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> @click="selecRole(1161)"></div>
</div> </div>
<!-- <div class="fixed top-[80px] right-[80px]"> <!-- <div class="fixed top-[80px] right-[80px]">

7
tailwind.config.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save