java_project
/
logpm_page
4
1
Fork 0
Code Issues Pull Requests Activity
Browse Source

首页自适应

fix_bug_pro20231227
396316021 1 year ago
parent
bdc946525b
commit
fa9fc466ce
4 changed files with 737 additions and 339 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 56
      postcss.config.js
  3. 339
      src/styles/flowStyle.scss
  4. 680
      src/views/wel/index.vue

1
package.json
Unescape View File

@ -36,6 +36,7 @@
"devDependencies": {
"@vitejs/plugin-vue": "^1.3.0",
"@vue/compiler-sfc": "^3.0.5",
"postcss-px-to-viewport": "^1.1.1",
"prettier": "^2.8.7",
"sass": "^1.37.5",
"unplugin-auto-import": "^0.11.2",

56
postcss.config.js
Unescape View File

@ -0,0 +1,56 @@
module.exports = {
plugins: {
// ...
'postcss-px-to-viewport': {
// (String) 需要转换的单位，默认为"px"
unitToConvert: 'px',
// (Number) 设计稿的视口宽度
viewportWidth: 1920,
// (Number) 单位转换后保留的精度
unitPrecision: 5,
/**
* (Array) 能转化为vw的属性列表
* 传入特定的CSS属性；
* 可以传入通配符""去匹配所有属性，例如：['']；
* 在属性的前或后添加"*",可以匹配特定的属性. (例如['position'] 会匹配 background-position-y)
* 在特定属性前加 "!"，将不转换该属性的单位 . 例如: ['*', '!letter-spacing']，将不转换letter-spacing
* "!" 和 ""可以组合使用， 例如: ['', '!font*']，将不转换font-size以及font-weight等属性
*/
propList: ['*'],
// (String) 希望使用的视口单位
viewportUnit: 'vw',
// (String) 字体使用的视口单位
fontViewportUnit: 'vw',
/**
* (Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
* 如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配：例如 selectorBlackList 为 ['body'] 的话， 那么 .body-class 就会被忽略
* 如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则：例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会
*/
selectorBlackList: [],
// (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
minPixelValue: 1,
// (Boolean) 媒体查询里的单位是否需要转换单位
mediaQuery: false,
// (Boolean) 是否直接更换属性值，而不添加备用属性
replace: true,
/**
* (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
* 如果值是一个正则表达式，那么匹配这个正则的文件会被忽略
* 如果传入的值是一个数组，那么数组里的值必须为正则
*/
exclude: /flowStyle/,
/**
* (Array or Regexp) 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
* 如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件
* 如果传入的值是一个数组，那么数组里的值必须为正则
*/
include: undefined,
// (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscape: false,
// (String) 横屏时使用的单位
landscapeUnit: 'vw',
// (Number) 横屏时使用的视口宽度
landscapeWidth: 568
}
}
}

339
src/styles/flowStyle.scss
Unescape View File

@ -0,0 +1,339 @@
.bx {
position: relative;
.ztjk {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
font-size: 14px;
font-size: #747474;
top: 235px;
left: 680px;
> img {
width: 62px;
height: 62px;
}
}
.left {
width: 640px !important;
height: 500px;
background: #ffffff;
box-shadow: 0px 0px 16px 0px rgba(211, 131, 42, 0.1);
border-radius: 32px;
opacity: 1;
box-sizing: border-box;
position: absolute;
left: 20px;
top: 10px;
padding: 30px 44px;
.tptitl {
display: flex;
align-items: center;
> img {
width: 32px;
height: 22px;
margin-right: 8px;
}
}
.onebx1 {
width: 100%;
height: 100%;
position: relative;
margin-top: 30px;
> div {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
font-size: 14px;
font-size: #747474;
> img {
width: 62px;
height: 62px;
}
}
.item1 {
top: 10px;
left: 0px;
}
.item2 {
top: 140px;
left: 0px;
}
.item3 {
top: 10px;
left: 140px;
}
.item4 {
top: 140px;
left: 140px;
}
.item5 {
top: 270px;
left: 140px;
}
.item6 {
top: 10px;
left: 330px;
}
.item7 {
top: 140px;
left: 330px;
}
.item8 {
top: 140px;
left: 450px;
}
.upimg {
width: 15px;
height: 40px;
position: absolute;
left: 355px;
top: 100px;
}
.rigth1 {
width: 40px;
height: 15px;
position: absolute;
left: 80px;
top: 40px;
}
.rigth2 {
width: 40px;
height: 15px;
position: absolute;
left: 80px;
top: 180px;
}
.rigth3 {
width: 40px;
height: 15px;
position: absolute;
left: 400px;
top: 180px;
}
.rigth4 {
width: 40px;
height: 15px;
position: absolute;
left: 530px;
top: 180px;
}
.rigthall {
width: 40px;
height: 270px;
position: absolute;
left: 250px;
top: 50px;
}
}
}
.rigth {
width: 640px;
height: 500px;
background: #ffffff;
box-shadow: 0px 0px 16px 0px rgba(58, 216, 188, 0.102);
border-radius: 32px;
opacity: 1;
box-sizing: border-box;
position: absolute;
left: 760px;
top: 10px;
padding: 30px 44px;
.tptitl {
display: flex;
align-items: center;
> img {
width: 32px;
height: 22px;
margin-right: 8px;
}
}
.onebx1 {
width: 100%;
height: 100%;
position: relative;
margin-top: 30px;
> div {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
font-size: 14px;
font-size: #747474;
> img {
width: 62px;
height: 62px;
}
}
.item1 {
top: 140px;
left: 50px;
}
.item2 {
top: 140px;
left: 170px;
}
.item3 {
top: 270px;
left: 170px;
}
.item4 {
top: 10px;
left: 300px;
}
.item5 {
top: 140px;
left: 300px;
}
.item6 {
top: 10px;
left: 430px;
}
.item7 {
top: 140px;
left: 430px;
}
.item8 {
top: 270px;
left: 430px;
}
.upimg {
width: 15px;
height: 40px;
position: absolute;
left: 190px;
top: 230px;
}
.rigth1 {
width: 40px;
height: 15px;
position: absolute;
left: 0px;
top: 180px;
}
.rigth2 {
width: 40px;
height: 15px;
position: absolute;
left: 120px;
top: 180px;
}
.rigth3 {
width: 40px;
height: 15px;
position: absolute;
left: 375px;
top: 180px;
}
.rigth4 {
width: 40px;
height: 15px;
position: absolute;
left: 375px;
top: 50px;
}
.leftall {
width: 182px;
height: 540px;
position: absolute;
left: 350px;
top: 50px;
z-index: 99;
}
.rigthall {
width: 165px;
height: 270px;
position: absolute;
left: 250px;
top: 50px;
}
}
}
.buts {
width: 1380px;
height: 234px;
background: #ffffff;
box-shadow: 0 0 16px 0 rgba(0, 134, 241, 0.102);
border-radius: 32px;
opacity: 1;
position: absolute;
box-sizing: border-box;
left: 20px;
top: 540px;
padding: 30px 44px;
.tptitl {
display: flex;
align-items: center;
> img {
width: 32px;
height: 22px;
margin-right: 8px;
}
}
.onebx1{
width: 100%;
height: 100%;
position: relative;
margin-top: 30px;
> div {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
font-size: 14px;
font-size: #747474;
> img {
width: 62px;
height: 62px;
}
}
.item1{
left: 1000px;
top:10px;
}
.item2{
left: 800px;
top:10px;
}
.item3{
left: 600px;
top:10px;
}
.item4{
left: 400px;
top:10px;
}
.left1{
width: 60px;
height: 15px;
position: absolute;
left: 900px;
top: 50px;
transform: rotate(180deg);
}
.left2{
width: 60px;
height: 15px;
position: absolute;
left: 700px;
top: 50px;
transform: rotate(180deg);
}
.left3{
width: 60px;
height: 15px;
position: absolute;
left: 500px;
top: 50px;
transform: rotate(180deg);
}
}
}
}
.tptitl{
color: #172E60;
}
.bx{
user-select: none;
}

680
src/views/wel/index.vue
Unescape View File

@ -128,345 +128,347 @@
</template>
<script lang="ts" setup></script>
<style lang="scss">
.bx {
position: relative;
.ztjk {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
font-size: 14px;
font-size: #747474;
top: 235px;
left: 680px;
> img {
width: 62px;
height: 62px;
}
}
.left {
width: 640px !important;
height: 500px;
background: #ffffff;
box-shadow: 0px 0px 16px 0px rgba(211, 131, 42, 0.1);
border-radius: 32px;
opacity: 1;
box-sizing: border-box;
position: absolute;
left: 20px;
top: 10px;
padding: 30px 44px;
.tptitl {
display: flex;
align-items: center;
> img {
width: 32px;
height: 22px;
margin-right: 8px;
}
}
.onebx1 {
width: 100%;
height: 100%;
position: relative;
margin-top: 30px;
> div {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
font-size: 14px;
font-size: #747474;
> img {
width: 62px;
height: 62px;
}
}
.item1 {
top: 10px;
left: 0px;
}
.item2 {
top: 140px;
left: 0px;
}
.item3 {
top: 10px;
left: 140px;
}
.item4 {
top: 140px;
left: 140px;
}
.item5 {
top: 270px;
left: 140px;
}
.item6 {
top: 10px;
left: 330px;
}
.item7 {
top: 140px;
left: 330px;
}
.item8 {
top: 140px;
left: 450px;
}
.upimg {
width: 15px;
height: 40px;
position: absolute;
left: 355px;
top: 100px;
}
.rigth1 {
width: 40px;
height: 15px;
position: absolute;
left: 80px;
top: 40px;
}
.rigth2 {
width: 40px;
height: 15px;
position: absolute;
left: 80px;
top: 180px;
}
.rigth3 {
width: 40px;
height: 15px;
position: absolute;
left: 400px;
top: 180px;
}
.rigth4 {
width: 40px;
height: 15px;
position: absolute;
left: 530px;
top: 180px;
}
.rigthall {
width: 40px;
height: 270px;
position: absolute;
left: 250px;
top: 50px;
}
}
}
.rigth {
width: 640px;
height: 500px;
background: #ffffff;
box-shadow: 0px 0px 16px 0px rgba(58, 216, 188, 0.102);
border-radius: 32px;
opacity: 1;
box-sizing: border-box;
position: absolute;
left: 760px;
top: 10px;
padding: 30px 44px;
.tptitl {
display: flex;
align-items: center;
> img {
width: 32px;
height: 22px;
margin-right: 8px;
}
}
.onebx1 {
width: 100%;
height: 100%;
position: relative;
margin-top: 30px;
> div {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
font-size: 14px;
font-size: #747474;
> img {
width: 62px;
height: 62px;
}
}
.item1 {
top: 140px;
left: 50px;
}
.item2 {
top: 140px;
left: 170px;
}
.item3 {
top: 270px;
left: 170px;
}
.item4 {
top: 10px;
left: 300px;
}
.item5 {
top: 140px;
left: 300px;
}
.item6 {
top: 10px;
left: 430px;
}
.item7 {
top: 140px;
left: 430px;
}
.item8 {
top: 270px;
left: 430px;
}
.upimg {
width: 15px;
height: 40px;
position: absolute;
left: 190px;
top: 230px;
}
.rigth1 {
width: 40px;
height: 15px;
position: absolute;
left: 0px;
top: 180px;
}
.rigth2 {
width: 40px;
height: 15px;
position: absolute;
left: 120px;
top: 180px;
}
.rigth3 {
width: 40px;
height: 15px;
position: absolute;
left: 375px;
top: 180px;
}
.rigth4 {
width: 40px;
height: 15px;
position: absolute;
left: 375px;
top: 50px;
}
.leftall {
width: 182px;
height: 540px;
position: absolute;
left: 350px;
top: 50px;
z-index: 99;
}
.rigthall {
width: 165px;
height: 270px;
position: absolute;
left: 250px;
top: 50px;
}
}
}
.buts {
width: 1380px;
height: 234px;
background: #ffffff;
box-shadow: 0 0 16px 0 rgba(0, 134, 241, 0.102);
border-radius: 32px;
opacity: 1;
position: absolute;
box-sizing: border-box;
left: 20px;
top: 540px;
padding: 30px 44px;
.tptitl {
display: flex;
align-items: center;
> img {
width: 32px;
height: 22px;
margin-right: 8px;
}
}
.onebx1{
width: 100%;
height: 100%;
position: relative;
margin-top: 30px;
> div {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
font-size: 14px;
font-size: #747474;
> img {
width: 62px;
height: 62px;
}
}
.item1{
left: 1000px;
top:10px;
}
.item2{
left: 800px;
top:10px;
}
.item3{
left: 600px;
top:10px;
}
.item4{
left: 400px;
top:10px;
}
.left1{
width: 60px;
height: 15px;
position: absolute;
left: 900px;
top: 50px;
transform: rotate(180deg);
}
.left2{
width: 60px;
height: 15px;
position: absolute;
left: 700px;
top: 50px;
transform: rotate(180deg);
}
.left3{
width: 60px;
height: 15px;
position: absolute;
left: 500px;
top: 50px;
transform: rotate(180deg);
}
}
}
}
.tptitl{
color: #172E60;
}
.bx{
user-select: none;
}
@import '../../styles/flowStyle.scss';
// .bx {
// position: relative;
// .ztjk {
// display: flex;
// flex-direction: column;
// align-items: center;
// position: absolute;
// font-size: 14px;
// font-size: #747474;
// top: 235px;
// left: 680px;
// > img {
// width: 62px;
// height: 62px;
// }
// }
// .left {
// width: 640px !important;
// height: 500px;
// background: #ffffff;
// box-shadow: 0px 0px 16px 0px rgba(211, 131, 42, 0.1);
// border-radius: 32px;
// opacity: 1;
// box-sizing: border-box;
// position: absolute;
// left: 20px;
// top: 10px;
// padding: 30px 44px;
// .tptitl {
// display: flex;
// align-items: center;
// > img {
// width: 32px;
// height: 22px;
// margin-right: 8px;
// }
// }
// .onebx1 {
// width: 100%;
// height: 100%;
// position: relative;
// margin-top: 30px;
// > div {
// display: flex;
// flex-direction: column;
// align-items: center;
// position: absolute;
// font-size: 14px;
// font-size: #747474;
// > img {
// width: 62px;
// height: 62px;
// }
// }
// .item1 {
// top: 10px;
// left: 0px;
// }
// .item2 {
// top: 140px;
// left: 0px;
// }
// .item3 {
// top: 10px;
// left: 140px;
// }
// .item4 {
// top: 140px;
// left: 140px;
// }
// .item5 {
// top: 270px;
// left: 140px;
// }
// .item6 {
// top: 10px;
// left: 330px;
// }
// .item7 {
// top: 140px;
// left: 330px;
// }
// .item8 {
// top: 140px;
// left: 450px;
// }
// .upimg {
// width: 15px;
// height: 40px;
// position: absolute;
// left: 355px;
// top: 100px;
// }
// .rigth1 {
// width: 40px;
// height: 15px;
// position: absolute;
// left: 80px;
// top: 40px;
// }
// .rigth2 {
// width: 40px;
// height: 15px;
// position: absolute;
// left: 80px;
// top: 180px;
// }
// .rigth3 {
// width: 40px;
// height: 15px;
// position: absolute;
// left: 400px;
// top: 180px;
// }
// .rigth4 {
// width: 40px;
// height: 15px;
// position: absolute;
// left: 530px;
// top: 180px;
// }
// .rigthall {
// width: 40px;
// height: 270px;
// position: absolute;
// left: 250px;
// top: 50px;
// }
// }
// }
// .rigth {
// width: 640px;
// height: 500px;
// background: #ffffff;
// box-shadow: 0px 0px 16px 0px rgba(58, 216, 188, 0.102);
// border-radius: 32px;
// opacity: 1;
// box-sizing: border-box;
// position: absolute;
// left: 760px;
// top: 10px;
// padding: 30px 44px;
// .tptitl {
// display: flex;
// align-items: center;
// > img {
// width: 32px;
// height: 22px;
// margin-right: 8px;
// }
// }
// .onebx1 {
// width: 100%;
// height: 100%;
// position: relative;
// margin-top: 30px;
// > div {
// display: flex;
// flex-direction: column;
// align-items: center;
// position: absolute;
// font-size: 14px;
// font-size: #747474;
// > img {
// width: 62px;
// height: 62px;
// }
// }
// .item1 {
// top: 140px;
// left: 50px;
// }
// .item2 {
// top: 140px;
// left: 170px;
// }
// .item3 {
// top: 270px;
// left: 170px;
// }
// .item4 {
// top: 10px;
// left: 300px;
// }
// .item5 {
// top: 140px;
// left: 300px;
// }
// .item6 {
// top: 10px;
// left: 430px;
// }
// .item7 {
// top: 140px;
// left: 430px;
// }
// .item8 {
// top: 270px;
// left: 430px;
// }
// .upimg {
// width: 15px;
// height: 40px;
// position: absolute;
// left: 190px;
// top: 230px;
// }
// .rigth1 {
// width: 40px;
// height: 15px;
// position: absolute;
// left: 0px;
// top: 180px;
// }
// .rigth2 {
// width: 40px;
// height: 15px;
// position: absolute;
// left: 120px;
// top: 180px;
// }
// .rigth3 {
// width: 40px;
// height: 15px;
// position: absolute;
// left: 375px;
// top: 180px;
// }
// .rigth4 {
// width: 40px;
// height: 15px;
// position: absolute;
// left: 375px;
// top: 50px;
// }
// .leftall {
// width: 182px;
// height: 540px;
// position: absolute;
// left: 350px;
// top: 50px;
// z-index: 99;
// }
// .rigthall {
// width: 165px;
// height: 270px;
// position: absolute;
// left: 250px;
// top: 50px;
// }
// }
// }
// .buts {
// width: 1380px;
// height: 234px;
// background: #ffffff;
// box-shadow: 0 0 16px 0 rgba(0, 134, 241, 0.102);
// border-radius: 32px;
// opacity: 1;
// position: absolute;
// box-sizing: border-box;
// left: 20px;
// top: 540px;
// padding: 30px 44px;
// .tptitl {
// display: flex;
// align-items: center;
// > img {
// width: 32px;
// height: 22px;
// margin-right: 8px;
// }
// }
// .onebx1{
// width: 100%;
// height: 100%;
// position: relative;
// margin-top: 30px;
// > div {
// display: flex;
// flex-direction: column;
// align-items: center;
// position: absolute;
// font-size: 14px;
// font-size: #747474;
// > img {
// width: 62px;
// height: 62px;
// }
// }
// .item1{
// left: 1000px;
// top:10px;
// }
// .item2{
// left: 800px;
// top:10px;
// }
// .item3{
// left: 600px;
// top:10px;
// }
// .item4{
// left: 400px;
// top:10px;
// }
// .left1{
// width: 60px;
// height: 15px;
// position: absolute;
// left: 900px;
// top: 50px;
// transform: rotate(180deg);
// }
// .left2{
// width: 60px;
// height: 15px;
// position: absolute;
// left: 700px;
// top: 50px;
// transform: rotate(180deg);
// }
// .left3{
// width: 60px;
// height: 15px;
// position: absolute;
// left: 500px;
// top: 50px;
// transform: rotate(180deg);
// }
// }
// }
// }
// .tptitl{
// color: #172E60;
// }
// .bx{
// user-select: none;
// }
</style>
<script>
import { mapGetters } from 'vuex';

Write Preview
Loading…
Cancel
Save