|
@@ -34,13 +34,22 @@
|
|
</div>
|
|
</div>
|
|
<div class="list-one">
|
|
<div class="list-one">
|
|
<div class="one-info">
|
|
<div class="one-info">
|
|
- <div class="one-name">职称:</div>广州荔博园种业有限公司董事长
|
|
|
|
|
|
+ <span class="one-name">职称:</span>广州荔博园种业有限公司董事长
|
|
</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="one-info">
|
|
- <div class="one-name">单位:</div>广州市从化区荔枝文化博览园
|
|
|
|
|
|
+ <span class="one-name">单位:</span>广州市从化区荔枝文化博览园
|
|
</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="one-info">
|
|
- <div class="one-name">擅长:</div>擅长:荔枝的病虫害防治、生长异常调节、物候期调 节等等...
|
|
|
|
|
|
+ <span class="one-name">擅长:</span>荔枝的病虫害防治、生长异常调节、物候期调 节等等...
|
|
|
|
+ </div>
|
|
|
|
+ <div class="one-info last-one">
|
|
|
|
+ <span class="one-name">服务品类:</span><div class="more">更多<el-icon class="more-icon"><ArrowRightBold /></el-icon></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="one-type">
|
|
|
|
+ <div class="type-item" v-for="item in 5" :key="item">
|
|
|
|
+ <img class="type-img" src="@/assets/img/gallery/icon-0.png" alt="">
|
|
|
|
+ <div class="type-name">荔枝</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -51,28 +60,32 @@
|
|
<img class="title-icon" src="@/assets/img/home/man.png" alt="">
|
|
<img class="title-icon" src="@/assets/img/home/man.png" alt="">
|
|
定点基地
|
|
定点基地
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="more">更多<el-icon class="more-icon"><ArrowRightBold /></el-icon></div>
|
|
</div>
|
|
</div>
|
|
- <div class="list-item" v-for="item in 3" :key="item">
|
|
|
|
- <div class="item-info">
|
|
|
|
- <div class="item-top">
|
|
|
|
- <div class="left-img">
|
|
|
|
- <img class="img-dom" src="https://birdseye-img-ali-cdn.sysuimars.com/16926861-1e20-4cbd-8bf2-90208db5a2d0/806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_202509010800_001_806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_20250901080536_0045_V_code-ws0fsmge97gh.jpeg" alt="">
|
|
|
|
- </div>
|
|
|
|
- <div class="left-content">
|
|
|
|
- <div class="content-title">
|
|
|
|
- <span>荔枝博览园</span>
|
|
|
|
|
|
+ <div class="list-content">
|
|
|
|
+ <div class="list-item" v-for="item in 3" :key="item">
|
|
|
|
+ <div class="item-info">
|
|
|
|
+ <div class="item-top">
|
|
|
|
+ <div class="left-img">
|
|
|
|
+ <img class="img-dom" src="https://birdseye-img-ali-cdn.sysuimars.com/16926861-1e20-4cbd-8bf2-90208db5a2d0/806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_202509010800_001_806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_20250901080536_0045_V_code-ws0fsmge97gh.jpeg" alt="">
|
|
</div>
|
|
</div>
|
|
- <div class="content-desc">
|
|
|
|
- <div>服务作物:荔枝-妃子笑、桂味</div>
|
|
|
|
- <div>农场位置:广东省广州市从化区</div>
|
|
|
|
|
|
+ <div class="left-content">
|
|
|
|
+ <div class="content-title">
|
|
|
|
+ <span>荔枝博览园</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="content-desc">
|
|
|
|
+ <div>果园面积:1500亩</div>
|
|
|
|
+ <div>服务作物:荔枝-妃子笑、桂味</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="item-btn">查看详情</div>
|
|
</div>
|
|
</div>
|
|
- <div class="item-btn">查看详情</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="bottom-btn"><div class="share-btn">分享</div></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -89,7 +102,7 @@ const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
height: 100vh;
|
|
height: 100vh;
|
|
.farm-list {
|
|
.farm-list {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: calc(100% - 40px);
|
|
|
|
|
|
+ height: calc(100% - 40px - 52px);
|
|
overflow: auto;
|
|
overflow: auto;
|
|
background-color: #f7f7f7;
|
|
background-color: #f7f7f7;
|
|
padding: 12px;
|
|
padding: 12px;
|
|
@@ -106,6 +119,12 @@ const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
padding-right: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .more {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ color: #999999;
|
|
|
|
+ }
|
|
.box-wrap {
|
|
.box-wrap {
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
@@ -132,6 +151,7 @@ const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
}
|
|
}
|
|
.info-name {
|
|
.info-name {
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+ align-items: center;
|
|
}
|
|
}
|
|
.info-bottom {
|
|
.info-bottom {
|
|
padding-top: 8px;
|
|
padding-top: 8px;
|
|
@@ -208,27 +228,68 @@ const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
.list-one {
|
|
.list-one {
|
|
padding-top: 8px;
|
|
padding-top: 8px;
|
|
.one-info {
|
|
.one-info {
|
|
- display: flex;
|
|
|
|
|
|
+ // display: flex;
|
|
color: #666666;
|
|
color: #666666;
|
|
line-height: 18px;
|
|
line-height: 18px;
|
|
padding-bottom: 2px;
|
|
padding-bottom: 2px;
|
|
.one-name {
|
|
.one-name {
|
|
|
|
+ flex: none;
|
|
color: rgba(102, 102, 102, 0.5);
|
|
color: rgba(102, 102, 102, 0.5);
|
|
}
|
|
}
|
|
|
|
+ &.last-one {
|
|
|
|
+ padding-top: 6px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .one-type {
|
|
|
|
+ padding-top: 8px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ .type-item {
|
|
|
|
+ width: 20%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .type-img {
|
|
|
|
+ width: 48px;
|
|
|
|
+ height: 48px;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ border: 1px solid #E5E5E5;
|
|
|
|
+ }
|
|
|
|
+ .type-name {
|
|
|
|
+ padding-top: 2px;
|
|
|
|
+ color: #666666;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.list-wrap {
|
|
&.list-wrap {
|
|
margin-top: 12px;
|
|
margin-top: 12px;
|
|
|
|
+ .list-title {
|
|
|
|
+ padding-bottom: 12px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ border-bottom: 1px solid #F5F5F5;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .list-content {
|
|
|
|
+ padding: 12px 0;
|
|
|
|
+ }
|
|
.list-item {
|
|
.list-item {
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
- padding: 10px;
|
|
|
|
|
|
+ // padding: 10px;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
.item-info {
|
|
.item-info {
|
|
.item-top {
|
|
.item-top {
|
|
display: flex;
|
|
display: flex;
|
|
@@ -299,11 +360,29 @@ const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.item-btn {
|
|
.item-btn {
|
|
- color: #a8a8a8;
|
|
|
|
|
|
+ color: #2199F8;
|
|
|
|
+ padding: 4px 8px;
|
|
|
|
+ border: 1px solid #2199F8;
|
|
|
|
+ border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.list-item + .list-item {
|
|
.list-item + .list-item {
|
|
- margin-top: 12px;
|
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ padding-top: 10px;
|
|
|
|
+ border-top: 1px solid #F5F5F5;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .bottom-btn {
|
|
|
|
+ height: 52px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 6px 32px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ .share-btn {
|
|
|
|
+ color: #fff;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border-radius: 20px;
|
|
|
|
+ padding: 8px;
|
|
|
|
+ background: linear-gradient(180deg, #76C3FF, #2199F8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|