fix
This commit is contained in:
huangjinming
parent
26df1b54ea
commit
e02b2cb059
@ -1,23 +1,23 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-px-to-viewport': {
|
||||
unitToConvert: 'px', // 需要转换的单位，默认为"px"
|
||||
viewportWidth: 1920, // 设计稿的视口宽度
|
||||
unitPrecision: 5, // 单位转换后保留的精度
|
||||
propList: ['*'], // 能转化为vw的属性列表
|
||||
viewportUnit: 'vw', // 希望使用的视口单位
|
||||
fontViewportUnit: 'vw', // 字体使用的视口单位
|
||||
selectorBlackList: [''], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
|
||||
minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
|
||||
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
|
||||
replace: true, // 是否直接更换属性值，而不添加备用属性
|
||||
exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
|
||||
include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
|
||||
landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
|
||||
landscapeUnit: 'vw', // 横屏时使用的单位
|
||||
landscapeWidth: 1920 // 横屏时使用的视口宽度
|
||||
}
|
||||
}
|
||||
}
|
||||
// module.exports = {
|
||||
// plugins: {
|
||||
// 'postcss-px-to-viewport': {
|
||||
// unitToConvert: 'px', // 需要转换的单位，默认为"px"
|
||||
// viewportWidth: 1920, // 设计稿的视口宽度
|
||||
// unitPrecision: 5, // 单位转换后保留的精度
|
||||
// propList: ['*'], // 能转化为vw的属性列表
|
||||
// viewportUnit: 'vw', // 希望使用的视口单位
|
||||
// fontViewportUnit: 'vw', // 字体使用的视口单位
|
||||
// selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
|
||||
// minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
|
||||
// mediaQuery: false, // 媒体查询里的单位是否需要转换单位
|
||||
// replace: true, // 是否直接更换属性值，而不添加备用属性
|
||||
// exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
|
||||
// include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
|
||||
// landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
|
||||
// landscapeUnit: 'vw', // 横屏时使用的单位
|
||||
// landscapeWidth: 1920 // 横屏时使用的视口宽度
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
1
public/app-ads.txt
Normal file
1
public/app-ads.txt
Normal file
@ -0,0 +1 @@
|
||||
facebook.com, 738821754408343, DIRECT, c3e20eee3f780d68
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 267 KiB After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 270 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 244 KiB |
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="bg bg-content">
|
||||
<div class="bg-middle"></div>
|
||||
|
||||
<div class="bg-up"></div>
|
||||
<div class="bg-middle"></div>
|
||||
<div class="bg-down"></div>
|
||||
<div class="copy-writing">
|
||||
<div class="name">{{ (teamItem.name) }}</div>
|
||||
@ -23,9 +24,11 @@ defineProps(["teamItem"]);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 38px;
|
||||
height: 96px;
|
||||
// height: 96px;
|
||||
overflow: hidden;
|
||||
// height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 395px;
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
@ -80,25 +83,26 @@ defineProps(["teamItem"]);
|
||||
margin-left: 60px;
|
||||
}
|
||||
.bg-up {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
height: 32px;
|
||||
width: 300px;
|
||||
background: url("@/assets/img/about/boder-top.svg") no-repeat;
|
||||
background-size: 300px 32px;
|
||||
}
|
||||
.bg-middle {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
height: calc(100% - 22px);
|
||||
// position: absolute;
|
||||
// top: 32px;
|
||||
flex: 1;
|
||||
// height: calc(100% - 64px);
|
||||
width: 300px;
|
||||
background: url("@/assets/img/about/boder-center.svg") repeat-y;
|
||||
background-size: 300px 32px;
|
||||
}
|
||||
|
||||
.bg-down {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
height: 32px;
|
||||
width: 300px;
|
||||
background: url("@/assets/img/about/boder-bottom.svg") no-repeat;
|
||||
|
||||
@ -41,8 +41,8 @@
|
||||
</div>
|
||||
<div class="card-list">
|
||||
<div class="card-item" v-for="team in cardText">
|
||||
<div class="cardbg">
|
||||
<img src="@/assets/img/about/card-bg.png" alt="" />
|
||||
<div class="child">
|
||||
<!-- <img src="@/assets/img/about/card-bg.png" alt="" /> -->
|
||||
</div>
|
||||
<Grid9Panel class="grid" :teamItem="team"></Grid9Panel>
|
||||
</div>
|
||||
@ -122,7 +122,7 @@ function handleScroll() {
|
||||
font-family: "Big John";
|
||||
font-weight: 400;
|
||||
color: #eeeeee;
|
||||
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
.vidion-bg {
|
||||
@ -206,37 +206,67 @@ function handleScroll() {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.card-item {
|
||||
position: relative;
|
||||
width: 330px;
|
||||
background: rgba(236, 46, 91, 1);
|
||||
border-radius: 12px;
|
||||
height: 456px;
|
||||
.cardbg {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
overflow: hidden;
|
||||
.child {
|
||||
position: absolute;
|
||||
// left: 30px;
|
||||
// top: 40px;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation: myfirstcard2 0.5s 1 alternate forwards;
|
||||
border-radius: 12px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
}
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
left: 30px;
|
||||
top: 30px;
|
||||
// margin-left: 30px;
|
||||
// margin-top: 40px;
|
||||
background-image: url("@/assets/img/about/card-bg.png");
|
||||
background-size: cover; /* 或者使用 contain */
|
||||
// border-radius: 50%;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
transform: scale(1);
|
||||
|
||||
}
|
||||
|
||||
// .cardbg {
|
||||
// position: absolute;
|
||||
// // left: 30px;
|
||||
// // top: 40px;
|
||||
// animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
// animation: myfirstcard2 0.5s 1 alternate forwards;
|
||||
// border-radius: 12px;
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// object-fit: cover;
|
||||
// border-radius: 12px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.card-item:hover .cardbg {
|
||||
border-radius: 12px;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation: myfirstcard1 0.5s 1 alternate forwards;
|
||||
img {
|
||||
border-radius: 12px;
|
||||
opacity: 0.3;
|
||||
filter: blur(3px);
|
||||
}
|
||||
.card-item:hover .child {
|
||||
transform: scale( 1.78);
|
||||
opacity: 0.3;
|
||||
// left: 0px;
|
||||
// top: 0px;
|
||||
top: 80px;
|
||||
// margin-left: 30px;
|
||||
// margin-top: 40px;
|
||||
}
|
||||
// .card-item:hover .cardbg {
|
||||
// border-radius: 12px;
|
||||
// animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
// animation: myfirstcard1 0.5s 1 alternate forwards;
|
||||
// img {
|
||||
// border-radius: 12px;
|
||||
// opacity: 0.3;
|
||||
// filter: blur(3px);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
29
src/components/about/demo.vue
Normal file
29
src/components/about/demo.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="parent">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.parent {
|
||||
position: relative;
|
||||
width: 330px;
|
||||
height: 456px;
|
||||
background: rgba(236, 46, 91, 1);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.child {
|
||||
position: absolute;
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
background-image: url("path/to/image.jpg");
|
||||
background-size: cover ; /* 或者使用 contain */
|
||||
border-radius: 50%;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.parent:hover .child {
|
||||
transform: scale(3.1167);
|
||||
}
|
||||
</style>
|
||||
@ -400,7 +400,7 @@ function test(index, sc) {
|
||||
.thumbs_hero_container {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
left: -42px;
|
||||
left: -46px;
|
||||
top: 51px;
|
||||
// padding: 0 40px;
|
||||
width: 766px;
|
||||
@ -438,7 +438,8 @@ function test(index, sc) {
|
||||
width: 106px;
|
||||
height: 106px;
|
||||
opacity: 0.6;
|
||||
background: rgba(131, 188, 217, 0.3);
|
||||
filter: grayscale(100%);
|
||||
// background: rgba(131, 188, 217, 1);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.hero_thumb_bg {
|
||||
@ -448,7 +449,7 @@ function test(index, sc) {
|
||||
top: 100px;
|
||||
width: 106px;
|
||||
height: 106px;
|
||||
background: rgba(255, 225, 117, 1);
|
||||
// background: rgba(255, 225, 117, 1);
|
||||
transform: translate(-50%, -50%);
|
||||
// clip-path: polygon(
|
||||
// 10px 0,
|
||||
|
||||
@ -163,7 +163,7 @@ function test(index, sc) {
|
||||
.weapon-name{
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 40px;
|
||||
top:-21px;
|
||||
}
|
||||
}
|
||||
// .weapon_big_image {
|
||||
@ -186,14 +186,14 @@ function test(index, sc) {
|
||||
.swiper-button-prev-btn {
|
||||
position: absolute;
|
||||
left: -120px;
|
||||
top: -280px;
|
||||
top: -360px;
|
||||
z-index: 5;
|
||||
}
|
||||
.swiper-button-next-btn {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
right: -120px;
|
||||
top: -280px;
|
||||
top: -360px;
|
||||
}
|
||||
|
||||
.swiper-button-disabled {
|
||||
|
||||
@ -534,7 +534,7 @@ function handleScroll() {
|
||||
height: 400px;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
transform: scale(1.078);
|
||||
transform: scale(1.010);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user