参数调整
This commit is contained in:
liukang
parent
285779c375
commit
3b1168c0e7
@ -153,10 +153,10 @@
|
||||
|
||||
<style scoped>
|
||||
.homelogo {
|
||||
width: 16vw;
|
||||
height: 3.8vw;
|
||||
margin-left: 2vw;
|
||||
margin-right: 2vw;
|
||||
width: 150rpx;
|
||||
height: 30rpx;
|
||||
margin-left: 15rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.menu {
|
||||
@ -189,7 +189,7 @@
|
||||
|
||||
.triangle {
|
||||
color: #FFE7CE;
|
||||
font-size: 0.25rem;
|
||||
font-size: 10rpx;
|
||||
position: absolute;
|
||||
bottom: 0px
|
||||
}
|
||||
|
||||
@ -18,8 +18,3 @@
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<style>
|
||||
html{
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -95,7 +95,7 @@
|
||||
|
||||
.top-left {
|
||||
flex: 1;
|
||||
padding: 2vw;
|
||||
padding: 30rpx 10rpx 10rpx 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -110,8 +110,8 @@
|
||||
.top-left-title {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
padding-left: 2vw;
|
||||
font-size: 0.6rem;
|
||||
padding-left: 10rpx;
|
||||
font-size: 18rpx;
|
||||
color: #219862;
|
||||
|
||||
}
|
||||
@ -119,20 +119,20 @@
|
||||
.top-left-title:before {
|
||||
content: "";
|
||||
background-color: #219862;
|
||||
width: 0.5vw;
|
||||
height: 3vw;
|
||||
width: 4rpx;
|
||||
height: 20rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -1.5vw;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
margin-top: -9rpx;
|
||||
-webkit-border-radius: 3rpx;
|
||||
-moz-border-radius: 3rpx;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
.top-left-content {
|
||||
padding: 2vw;
|
||||
font-size: 0.4rem;
|
||||
padding: 10rpx;
|
||||
font-size: 10rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
<div class="top-left-title">
|
||||
张家港绿洲璟院大区景观营销亮点
|
||||
</div>
|
||||
<div class=two-two-img>
|
||||
<div class="two-two-img">
|
||||
<image src="/static/toplefttwotwo.jpg" mode="widthFix" />
|
||||
</div>
|
||||
</div>
|
||||
@ -246,16 +246,16 @@
|
||||
<div class="top-content-seven">
|
||||
<div class="top-content-seven-top">
|
||||
<div class="top-content-seven-top-title">
|
||||
<div style="font-size: 1.8vw;padding-bottom: 1.5vw;font-weight: bold;">健康跑道</div>
|
||||
<div style="font-size: 1.5vw;">用有氧运动开启全新一天</div>
|
||||
<div style="font-size: 18rpx;padding-bottom: 15rpx;font-weight: bold;">健康跑道</div>
|
||||
<div style="font-size: 15rpx;">用有氧运动开启全新一天</div>
|
||||
</div>
|
||||
<image src="/static/seven1.jpg" mode="heightFix" />
|
||||
</div>
|
||||
<div class="top-content-seven-bottom">
|
||||
<div class="top-content-seven-bottom-left">
|
||||
<div style="font-size: 1.8vw;padding-bottom: 1.5vw;font-weight: bold;color:#2C3D2B">尊享归家
|
||||
<div style="font-size: 18rpx;padding-bottom: 15rpx;font-weight: bold;color:#2C3D2B">尊享归家
|
||||
</div>
|
||||
<div style="font-size: 1.5vw;">雅致入户前厅，静雅石墙、疏密有致的植物搭配，从视觉到体验，彰显生活的仪式感和价值感。</div>
|
||||
<div style="font-size: 15rpx;">雅致入户前厅，静雅石墙、疏密有致的植物搭配，从视觉到体验，彰显生活的仪式感和价值感。</div>
|
||||
</div>
|
||||
<div class="top-content-seven-bottom-right">
|
||||
<image src="/static/seven2.jpg" mode="heightFix" />
|
||||
@ -305,7 +305,7 @@
|
||||
|
||||
.top-left {
|
||||
flex: 1;
|
||||
padding: 2vw;
|
||||
padding: 30rpx 10rpx 10rpx 10rpx;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
@ -315,56 +315,56 @@
|
||||
}
|
||||
|
||||
.top-left-content {
|
||||
padding: 2vw;
|
||||
padding: 15rpx;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.top-left-title {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
padding-left: 2vw;
|
||||
font-size: 0.6rem;
|
||||
padding-left: 10rpx;
|
||||
font-size: 18rpx;
|
||||
color: #2C3D2B;
|
||||
}
|
||||
|
||||
.top-left-title:before {
|
||||
content: "";
|
||||
background-color: #2C3D2B;
|
||||
width: 0.5vw;
|
||||
height: 3vw;
|
||||
width: 4rpx;
|
||||
height: 20rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -1.5vw;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
margin-top: -9rpx;
|
||||
-webkit-border-radius: 3rpx;
|
||||
-moz-border-radius: 3rpx;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
.top-left-content-item {
|
||||
margin-bottom: 1vw;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.top-left-content-item-title {
|
||||
color: #2C3D2B;
|
||||
font-weight: bold;
|
||||
font-size: 0.4rem;
|
||||
font-size: 15rpx;
|
||||
}
|
||||
|
||||
.top-left-content-item-content {
|
||||
font-size: 0.3rem;
|
||||
font-size: 12rpx;
|
||||
}
|
||||
|
||||
.top-left-content-item-img {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1vw;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.top-left-content-item-img image {
|
||||
height: 12vw;
|
||||
height: 100rpx;
|
||||
object-fit: cover;
|
||||
border: 0.3vw solid #2E9F73;
|
||||
border: 2rpx solid #2E9F73;
|
||||
|
||||
}
|
||||
|
||||
@ -377,7 +377,10 @@
|
||||
|
||||
.two-top-left {
|
||||
flex: 2;
|
||||
padding: 2vw;
|
||||
padding: 15rpx;
|
||||
padding: 30rpx 0 0 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.two-top-right {
|
||||
@ -386,11 +389,11 @@
|
||||
|
||||
|
||||
.two-two-img {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3vw;
|
||||
padding: 0 10rpx 0 10rpx;
|
||||
}
|
||||
|
||||
.two-two-img image {
|
||||
@ -421,26 +424,26 @@
|
||||
|
||||
.top-content-three-content {
|
||||
background-color: #2C3D2B;
|
||||
width: 50vw;
|
||||
height: 25vw;
|
||||
width: 50%;
|
||||
height: auto;
|
||||
color: white;
|
||||
padding: 2vw;
|
||||
padding: 15rpx;
|
||||
}
|
||||
|
||||
.three-title {
|
||||
font-size: 2.2vw;
|
||||
font-size: 18rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.three-content-top {
|
||||
font-size: 1.7vw;
|
||||
font-size: 13rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.three-content-content {
|
||||
font-size: 1.7vw;
|
||||
font-size: 13rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
@ -458,7 +461,7 @@
|
||||
.top-content-four {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 4vw;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.top-content-four-left {
|
||||
@ -469,13 +472,14 @@
|
||||
.top-content-four-right {
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
padding: 30rpx 0 0 0;
|
||||
}
|
||||
|
||||
.top-content-four-content {
|
||||
margin-top: 1.2vw;
|
||||
font-size: 1.3vw;
|
||||
margin-top: 10rpx;
|
||||
font-size: 12rpx;
|
||||
width: 75%;
|
||||
margin-bottom: 1vw;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.top-content-four-right image,
|
||||
@ -485,7 +489,7 @@
|
||||
}
|
||||
|
||||
.top-content-four-right image {
|
||||
margin-bottom: 2vw;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.swiper-five {
|
||||
@ -509,7 +513,7 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 20%;
|
||||
padding: 1vw;
|
||||
padding: 8rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -518,19 +522,21 @@
|
||||
}
|
||||
|
||||
.img-title {
|
||||
font-size: 1.4vw;
|
||||
font-size: 15rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.top-content-six {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 30rpx 0 0 0;
|
||||
}
|
||||
|
||||
.two-six-img {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 3vw;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -550,14 +556,14 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-right: 2vw;
|
||||
padding-right: 15rpx;
|
||||
}
|
||||
|
||||
.top-content-seven {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5vw;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -574,7 +580,7 @@
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding-right: 2vw;
|
||||
padding-right: 15rpx;
|
||||
}
|
||||
|
||||
.top-content-seven-top image {
|
||||
@ -585,7 +591,7 @@
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
margin-top: 1vw;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.top-content-seven-bottom {
|
||||
@ -599,7 +605,7 @@
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
padding-right: 2vw;
|
||||
padding-right: 15rpx;
|
||||
}
|
||||
|
||||
.top-content-seven-bottom-right {
|
||||
|
||||
36
uni.scss
36
uni.scss
@ -39,38 +39,38 @@ $uni-border-color:#c8c7cc;
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16px;
|
||||
$uni-font-size-sm:12rpx;
|
||||
$uni-font-size-base:14rpx;
|
||||
$uni-font-size-lg:16rpx;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
$uni-img-size-sm:20rpx;
|
||||
$uni-img-size-base:26rpx;
|
||||
$uni-img-size-lg:40rpx;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-sm: 2rpx;
|
||||
$uni-border-radius-base: 3rpx;
|
||||
$uni-border-radius-lg: 6rpx;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
$uni-spacing-row-sm: 5rpx;
|
||||
$uni-spacing-row-base: 10rpx;
|
||||
$uni-spacing-row-lg: 15rpx;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
$uni-spacing-col-sm: 4rpx;
|
||||
$uni-spacing-col-base: 8rpx;
|
||||
$uni-spacing-col-lg: 12rpx;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-font-size-title:20rpx;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-font-size-subtitle:26rpx;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
$uni-font-size-paragraph:15rpx;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user