Skip to content

B
buildingAgricultureSharing-miniapp
Commit 39a96259 authored by dt-1640819025-xxmxd's avatar dt-1640819025-xxmxd
Browse files
Options

'1'

parent 6635699e
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 52 deletions
src/pages/index/index.vue
View file @ 39a96259
<template> <template>
<view style="background-color: #f3f3f3; height: 100vh"> <view style="background-color: #f3f3f3; height: 100vh">
<view class="container"> <view class="container">
<view class="top"> <view>
<img src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" /> <img class="img1" src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" />
<view class="left-icon"></view> <img class="img2" src="/static/assets/bottom.png" style="width: 750rpx; height: 32rpx" />
<img <img class="img3" src="/static/assets/right.png" style="width: 288rpx; height: 124rpx" />
class="bottom-image"
src="/static/assets/bottom.png"
style="width: 750rpx; height: 32rpx"
/>
<view>
<img class="right-image" src="/static/assets/right.png" />
</view>
</view> </view>
<view class="sort"> <view class="sort">
<img src="/static/assets/sort.png" style="width: 750rpx; height: 186rpx" /> <view style="display: flex; flex-direction: row">
<view style="display: flex; flex-direction: row; margin-top: -200rpx; margin-left: 20rpx">
<view class="borderClass"> <view class="borderClass">
<img src="/static/assets/buildingAgriculture.png" style="width: 48px; height: 48px" /> <img src="/static/assets/buildingAgriculture.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">筑农严选</view> <view class="sort-text">筑农严选</view>
</view> </view>
<view class="borderClass"> <view class="borderClass">
<img src="/static/assets/rural.png" style="width: 48px; height: 48px" /> <img src="/static/assets/rural.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">认养农业</view> <view class="sort-text">认养农业</view>
</view> </view>
<view class="borderClass"> <view class="borderClass">
<img src="/static/assets/adoption.png" style="width: 48px; height: 48px" /> <img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">乡村旅居</view> <view class="sort-text">乡村旅居</view>
</view> </view>
<view class="borderClass"> <view class="borderClass">
<img src="/static/assets/adoption.png" style="width: 48px; height: 48px" /> <img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">特色农庄</view> <view class="sort-text">特色农庄</view>
</view> </view>
</view> </view>
...@@ -41,16 +33,31 @@ ...@@ -41,16 +33,31 @@
</view> </view>
<view style="display: flex; flex-direction: row"> <view style="display: flex; flex-direction: row">
<view class="detail-border"> <view class="detail-border">
<img src="/static/assets/detailedMapOne.png" style="width: 108px; height: 88px" /> <img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
<view class="detail-title">干辣椒炒肉</view> <view class="detail-title">干辣椒炒肉</view>
<view class="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view> </view>
<view class="detail-border"> <view class="detail-border">
<img src="/static/assets/detailedMapTwo.png" style="width: 108px; height: 88px" /> <img src="/static/assets/detailedMapTwo.png" style="width: 216rpx; height: 176rpx" />
<view class="detail-title">贵阳辣子鸡</view> <view class="detail-title">贵阳辣子鸡</view>
<view class="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view> </view>
<view class="detail-border"> <view class="detail-border">
<img src="/static/assets/detailedMapThree.png" style="width: 108px; height: 88px" /> <img src="/static/assets/detailedMapThree.png" style="width: 216rpx; height: 176rpx" />
<view class="detail-title">麻辣鱼豆腐</view> <view class="detail-title">麻辣鱼豆腐</view>
<view class="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -69,79 +76,85 @@ ...@@ -69,79 +76,85 @@
height: 440rpx; height: 440rpx;
opacity: 1; opacity: 1;
} }
.img1 {
display: flex;
}
.img2 {
display: flex;
margin-top: -31rpx;
}
.img3 {
display: flex;
margin-top: -120rpx;
margin-left: 462rpx;
}
.bottom-image { .bottom-image {
position: relative; position: relative;
top: -38rpx; top: -40rpx;
width: 750rpx; width: 750rpx;
height: 32rpx; height: 32rpx;
opacity: 1; opacity: 1;
} }
.right-image { .right-image {
top: -148rpx; top: -192rpx;
float: right; float: right;
position: relative; position: relative;
} }
.sort { .sort {
position: relative;
//left: 0rpx;
top: -150rpx;
width: 750rpx; width: 750rpx;
height: 186rpx; height: 186rpx;
opacity: 1; padding-left: 40rpx;
background: linear-gradient(180deg, #82ce8b -39%, #ffffff 36%);
} }
.borderClass { .borderClass {
width: 200rpx; width: 96rpx;
height: 200rpx; height: 96rpx;
background-color: transparent; margin-left: 60rpx;
margin: 40rpx; margin-top: 22rpx;
} }
.sort-text { .sort-text {
font-family: Source Han Sans;
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
line-height: 24rpx; line-height: 24rpx;
text-align: center; text-align: center;
letter-spacing: 0em; letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d; color: #3d3d3d;
} }
.product-page { .product-page {
position: relative;
width: 710rpx; width: 710rpx;
height: 742rpx; height: 742rpx;
border-radius: 16rpx; border-radius: 16rpx;
opacity: 1; margin-left: 20rpx;
background: #ffffff; margin-top: 10rpx;
left: 20rpx; background-color: #ffffff;
top: -60rpx;
} }
.page-title { .page-title {
position: relative;
left: 20rpx;
top: 20rpx;
width: 112rpx; width: 112rpx;
height: 28rpx; height: 28rpx;
opacity: 1;
font-family: Source Han Sans; font-family: Source Han Sans;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
line-height: 28rpx; line-height: 28rpx;
text-align: center; text-align: center;
letter-spacing: 0em; letter-spacing: 0em;
position: absolute;
font-variation-settings: 'opsz' auto; margin-top: 20rpx;
font-feature-settings: 'kern' on; margin-left: 20rpx;
color: #3d3d3d; color: #3d3d3d;
} }
.main-img { .main-img {
width: 670rpx; width: 670rpx;
height: 362rpx; height: 362rpx;
border-radius: 16rpx; border-radius: 16rpx;
opacity: 1; margin-top: 68rpx;
margin-top: 40rpx; margin-left: 20rpx;
}
.detail-border {
width: 216rpx;
height: 262rpx;
margin-left: 20rpx;
margin-top: 20rpx;
border-radius: 16px;
} }
.detail-title { .detail-title {
font-family: Source Han Sans; font-family: Source Han Sans;
...@@ -149,9 +162,35 @@ ...@@ -149,9 +162,35 @@
font-weight: 500; font-weight: 500;
line-height: 28rpx; line-height: 28rpx;
letter-spacing: 0em; letter-spacing: 0em;
margin-left: 48rpx;
font-variation-settings: 'opsz' auto; margin-top: -20rpx;
font-feature-settings: 'kern' on;
color: #3d3d3d; color: #3d3d3d;
} }
.jiage-page {
width: 96rpx;
height: 28rpx;
margin-top: 20rpx;
font-size: 24rpx;
font-weight: 500;
color: #abaaaa;
}
.jiage {
font-size: 24rpx;
font-weight: 500;
line-height: 28rpx;
color: #fa5151;
}
.yushou {
width: 48rpx;
height: 24rpx;
border-radius: 2px;
font-size: 16rpx;
line-height: 16rpx;
background: #fcdbdb;
text-align: center;
line-height: 24rpx;
margin-left: 120rpx;
margin-top: -23rpx;
color: #fa5151;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment