|
@@ -1,6 +1,18 @@
|
|
|
<template>
|
|
|
- <div class="paddy" style="padding-top:44px">
|
|
|
- <div class="paddy-title">
|
|
|
+ <div class="paddy">
|
|
|
+ <div class="top">
|
|
|
+ <img src="@/assets/images/home/paddy.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="detail">
|
|
|
+ <img src="@/assets/images/home/paddy-detail.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="middle">
|
|
|
+ <img src="@/assets/images/home/paddy-middle.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <img src="@/assets/images/home/paddy-bottom.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- <div class="paddy-title">
|
|
|
<van-nav-bar
|
|
|
title="我的稻田"
|
|
|
class="van-nav-bar-my-fixed"
|
|
@@ -11,8 +23,7 @@
|
|
|
src="https://retailcloud-oss-bucket.oss-cn-hangzhou.aliyuncs.com/20210302/824b52ce-ba5a-4418-b299-c3d91b010a5c.jpg?Expires=1615516693&OSSAccessKeyId=LTAIT3bnC94ivUGf&Signature=RNwkapvSZfdzxdaGb21vl3BIP1c%3D"
|
|
|
alt=""
|
|
|
/>
|
|
|
- </div>
|
|
|
-
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -21,27 +32,75 @@
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.paddy {
|
|
|
- .paddy-title {
|
|
|
- position: fixed;
|
|
|
- padding: 0;
|
|
|
+ overflow: scroll;
|
|
|
+ .top {
|
|
|
width: 100%;
|
|
|
- margin: 0;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 3;
|
|
|
- border: 0;
|
|
|
- height: 44px;
|
|
|
+ height: 30%;
|
|
|
+ margin: 0 auto;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // background-size: 50% 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail {
|
|
|
+ width: 90%;
|
|
|
+ height: 40%;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 30px;
|
|
|
+
|
|
|
+ top: -2%;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // background-size: 50% 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .middle {
|
|
|
+ width: 90%;
|
|
|
+ height: 50%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 30px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // background-size: 50% 50%;
|
|
|
+ }
|
|
|
}
|
|
|
- .paddy-main{
|
|
|
- display: block;
|
|
|
- padding:16px;
|
|
|
- img{
|
|
|
+ .bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 auto;
|
|
|
+ img {
|
|
|
width: 100%;
|
|
|
- height: auto;
|
|
|
- min-height: 30vh;
|
|
|
- display: block;
|
|
|
- border: 1px solid #b0b0b0;
|
|
|
+ height: 100%;
|
|
|
+ // background-size: 50% 50%;
|
|
|
}
|
|
|
}
|
|
|
+ // .paddy-title {
|
|
|
+ // position: fixed;
|
|
|
+ // padding: 0;
|
|
|
+ // width: 100%;
|
|
|
+ // margin: 0;
|
|
|
+ // top: 0;
|
|
|
+ // left: 0;
|
|
|
+ // z-index: 3;
|
|
|
+ // border: 0;
|
|
|
+ // height: 44px;
|
|
|
+ // }
|
|
|
+ // .paddy-main {
|
|
|
+ // display: block;
|
|
|
+ // padding: 16px;
|
|
|
+ // img {
|
|
|
+ // width: 100%;
|
|
|
+ // height: auto;
|
|
|
+ // min-height: 30vh;
|
|
|
+ // display: block;
|
|
|
+ // border: 1px solid #b0b0b0;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
</style>
|