Skip to content

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

'1'

parent 6635699e
Show whitespace changes
Inline Side-by-side
Showing with 90 additions and 51 deletions
src/pages/index/index.vue
View file @ 39a96259
<template>
<view style="background-color: #f3f3f3; height: 100vh">
<view class="container">
<view class="top">
<img src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" />
<view class="left-icon"></view>
<img
class="bottom-image"
src="/static/assets/bottom.png"
style="width: 750rpx; height: 32rpx"
/>
<view>
<img class="right-image" src="/static/assets/right.png" />
</view>
<img class="img1" src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" />
<img class="img2" src="/static/assets/bottom.png" style="width: 750rpx; height: 32rpx" />
<img class="img3" src="/static/assets/right.png" style="width: 288rpx; height: 124rpx" />
</view>
<view class="sort">
<img src="/static/assets/sort.png" style="width: 750rpx; height: 186rpx" />
<view style="display: flex; flex-direction: row; margin-top: -200rpx; margin-left: 20rpx">
<view style="display: flex; flex-direction: row">
<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>
<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>
<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>
<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>
</view>
......@@ -41,16 +33,31 @@
</view>
<view style="display: flex; flex-direction: row">
<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="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view>
<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="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view>
<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="jiage-page">
<text class="jiage">￥25</text>
/份
</view>
<view class="yushou">预售</view>
</view>
</view>
</view>
......@@ -69,79 +76,85 @@
height: 440rpx;
opacity: 1;
}
.img1 {
display: flex;
}
.img2 {
display: flex;
margin-top: -31rpx;
}
.img3 {
display: flex;
margin-top: -120rpx;
margin-left: 462rpx;
}
.bottom-image {
position: relative;
top: -38rpx;
top: -40rpx;
width: 750rpx;
height: 32rpx;
opacity: 1;
}
.right-image {
top: -148rpx;
top: -192rpx;
float: right;
position: relative;
}
.sort {
position: relative;
//left: 0rpx;
top: -150rpx;
width: 750rpx;
height: 186rpx;
opacity: 1;
padding-left: 40rpx;
background: linear-gradient(180deg, #82ce8b -39%, #ffffff 36%);
}
.borderClass {
width: 200rpx;
height: 200rpx;
background-color: transparent;
margin: 40rpx;
width: 96rpx;
height: 96rpx;
margin-left: 60rpx;
margin-top: 22rpx;
}
.sort-text {
font-family: Source Han Sans;
font-size: 24rpx;
font-weight: 500;
line-height: 24rpx;
text-align: center;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
}
.product-page {
position: relative;
width: 710rpx;
height: 742rpx;
border-radius: 16rpx;
opacity: 1;
background: #ffffff;
left: 20rpx;
top: -60rpx;
margin-left: 20rpx;
margin-top: 10rpx;
background-color: #ffffff;
}
.page-title {
position: relative;
left: 20rpx;
top: 20rpx;
width: 112rpx;
height: 28rpx;
opacity: 1;
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: 500;
line-height: 28rpx;
text-align: center;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
position: absolute;
margin-top: 20rpx;
margin-left: 20rpx;
color: #3d3d3d;
}
.main-img {
width: 670rpx;
height: 362rpx;
border-radius: 16rpx;
opacity: 1;
margin-top: 40rpx;
margin-top: 68rpx;
margin-left: 20rpx;
}
.detail-border {
width: 216rpx;
height: 262rpx;
margin-left: 20rpx;
margin-top: 20rpx;
border-radius: 16px;
}
.detail-title {
font-family: Source Han Sans;
......@@ -149,9 +162,35 @@
font-weight: 500;
line-height: 28rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
margin-left: 48rpx;
margin-top: -20rpx;
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>
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