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

Write Preview
Loading…
Cancel
Save