6 changed files with 385 additions and 47 deletions
@ -0,0 +1,227 @@ |
|||
<style lang="less" scoped> |
|||
.container{ |
|||
height:100%; |
|||
background:#f6f6f6; |
|||
&>.d-search{ |
|||
.u-tabs{ |
|||
margin-top:-20rpx; |
|||
} |
|||
.tabs{ |
|||
display:flex; |
|||
flex-wrap: wrap; |
|||
margin:20rpx -20rpx -15rpx 0; |
|||
text{ |
|||
height:48rpx; |
|||
line-height: 48rpx; |
|||
background:rgba(238, 238, 238, 0.4); |
|||
color:#999; |
|||
font-size:24rpx; |
|||
border-radius: 48rpx; |
|||
min-width:110rpx; |
|||
padding:0 10rpx; |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
transition: all 0.3s; |
|||
margin:0 20rpx 15rpx 0; |
|||
&.active{ |
|||
color:#fff; |
|||
background:#10C176; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
scroll-view{ |
|||
flex-grow: 1; |
|||
height:1rpx; |
|||
.card{ |
|||
margin-top:0; |
|||
&>.info{ |
|||
display:flex; |
|||
align-items: center; |
|||
&>.plant-xitongxiaoxi{ |
|||
background:#10C176; |
|||
color:#fff; |
|||
width:90rpx; |
|||
height:90rpx; |
|||
line-height: 90rpx; |
|||
text-align: center; |
|||
border-radius: 50%; |
|||
position:relative; |
|||
margin-right:16rpx; |
|||
&:after{ |
|||
content:""; |
|||
position:absolute; |
|||
background:red; |
|||
width:12rpx; |
|||
height:12rpx; |
|||
border-radius: 50%; |
|||
top:9rpx; |
|||
right:9rpx; |
|||
} |
|||
} |
|||
&>view{ |
|||
flex-grow: 1; |
|||
width:1rpx; |
|||
.title{ |
|||
display:flex; |
|||
align-items: center; |
|||
text{ |
|||
&:first-child{ |
|||
font-weight: bold; |
|||
} |
|||
&:nth-child(2){ |
|||
margin:0 20rpx 0 18rpx; |
|||
color:#fff; |
|||
background:#10C176; |
|||
border-radius: 4rpx 40rpx 4rpx 40rpx; |
|||
height:34rpx; |
|||
line-height: 34rpx; |
|||
padding:0 10rpx; |
|||
min-width:80rpx; |
|||
text-align: center; |
|||
font-size:20rpx; |
|||
} |
|||
&:nth-child(3){ |
|||
margin-left:auto; |
|||
} |
|||
} |
|||
} |
|||
.tabs{ |
|||
display:flex; |
|||
flex-wrap: wrap; |
|||
margin:12rpx -18rpx -16rpx 0; |
|||
text{ |
|||
border-radius: 44rpx; |
|||
margin:0 18rpx 16rpx 0; |
|||
font-size:24rpx; |
|||
height:44rpx; |
|||
line-height: 44rpx; |
|||
background-position: 20rpx 12rpx; |
|||
background-repeat: no-repeat; |
|||
color:rgba(var(--c),1); |
|||
background-color:rgba(var(--c),0.1); |
|||
padding-right:20rpx; |
|||
} |
|||
.germinate{ |
|||
--c:15, 194, 119; |
|||
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAYAAAB24g05AAAAAXNSR0IArs4c6QAAAYZJREFUKFOdkU1IVHEUxc957yE45YwKSRnUpp24dKELZ4YCMdFNJNWyRdDOr3lBkMzK0PmIEsFVqzDMlRsXBcObaBuCgRjMphREUOq9USqc9z/igGKKMHi3554f955D1DCXC8/aLNu8pNgFoonSqsA5v8m8YQ1+NBZTgcB6AN8oXRF5lYAjaakKuFQcbnfgDEHoAlkHaPlfxYz+vZ37AYGxz+4aoe8S7oIwMhxRuPe+fGdmhzEv9RTA9KEAYAPALwA3INh+ItOMD/ftaMvNOYvWIIC9CszAbjxbOLqcMc+doKV9iR0EegUJ4FcJpSAx9TDqua8rDiYdKa6K+VRO5rZPvv1fBg3eWL9Nzgq4BnEeMCuw2O53Zx6dl9XZENNpq74zuP6nJ78e+ei22nXmQTmRzdcOOLXZWEw9/h3PvL0wIOaNTfiJ7POaAZEvbqsT4okl3QMZGKlEoB+EF8K82936uYjBhfC4hVNkRgujL2jbfYBuEWyu6oIvahPkssL98SD5qnTkOwB+A5pVJ9wdJQAAAABJRU5ErkJggg==); |
|||
background-size:30rpx 22rpx; |
|||
padding-left:30rpx+25rpx; |
|||
} |
|||
.organ{ |
|||
--c:248, 203, 54; |
|||
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAYAAACdKY9CAAAAAXNSR0IArs4c6QAAAQ9JREFUKFOlUrtKA1EQPedeHxERFAQRCYK9GCW7Ivb+hEUqsbONhZVFCm0kYCPoD9gFS4tgYeFVsLBLmyaNWO5qmCOYjYJuksJphnmcmTMPIpPkIXoGuda3f7QEoSVgbyoOd+wH0sfoCKL/DZA0A+IAQLMQhR0moVwHXPFv5cxjuJTTIYHpQhTWmYRYA5O/AjoDUAIw+w+A0AV0QcemmTZIVAFm8+V2sBOjzq2bpnJ+fowTVwTjHtWBlGQATgHcSjgmuTUCkD+6YDVPNWjOj8fhfviWhNZrp12aW1jadbK3yc2n6xEA1QW8kFoF3IqXauy9BJbzCAlqOOpG8hVAi864//0aw473EcrbEt8NqnwCf8mG+U/vRGMAAAAASUVORK5CYII=); |
|||
background-size:26rpx 24rpx; |
|||
padding-left:26rpx+25rpx; |
|||
} |
|||
.type{ |
|||
--c:235, 67, 118; |
|||
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAASBJREFUKFN9kD0vQ2EYhq/7bUUklUhEYxAMNfsDJk0TGxN/wWJ0EpvExmjpajMYTAaDxSIWg1ERFh/toCGpr55bzkk1qmmf8cl9PR+XqvPRHfY+QRH9KvY2YkXVYmTgEFjCNIBmi8sghv7MSDNtwHapfv8+OlPZ/UhCV4W1wZHJoSpiuAV1AgltxxVJL0nA9ogUCj03YC8iPWBixDiQ/fdS10lz+ZOdsSRULUanwFxfIH0IPhMD2ANIj2rGURzClsT0r5hOS62Rtq8F5aZ9miHMWo4kXXZYSrW2AZ7q942p7MSrklYu5M8Qtz0B7POBz8zCV/Z7+Y3aXi6MHSHV+2xwjZhNiUnsG4I2kC5S4Lm4fqBYxwRWwekJ3aVEdtmi9AMqTJE6K1mcKgAAAABJRU5ErkJggg==); |
|||
background-size:24rpx 22rpx; |
|||
padding-left:24rpx+25rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
&>.content{ |
|||
display:flex; |
|||
align-items: center; |
|||
margin-top:10rpx; |
|||
.fruit,.food{ |
|||
margin-right:16rpx; |
|||
border-radius: 8rpx; |
|||
flex-shrink: 0; |
|||
height:44rpx; |
|||
line-height: 44rpx; |
|||
color:rgba(var(--c),1); |
|||
background:rgba(var(--c),0.1); |
|||
display:flex; |
|||
align-items: center; |
|||
padding:0 5rpx; |
|||
&:before{ |
|||
content:""; |
|||
flex-shrink: 0; |
|||
margin-right:4rpx; |
|||
} |
|||
&:after{ |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
.fruit{ |
|||
--c:248, 203, 54; |
|||
&:before{ |
|||
width:29rpx; |
|||
height:21rpx; |
|||
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAALCAYAAACgR9dcAAAAAXNSR0IArs4c6QAAAitJREFUKFNVkV1Ik3EUxp//ecdm84ttMFHDGMYSbKaIbTPISTYzeJmDdiNUUhdZVHRRBEUXel1UBN6EF2LRRdEXIyiyG5sGGqkFUYph4i6knBs13Lv3/Z/YcsLOzTk8D7/DwzkCW6WqqtXutodGb40+Kmi5fjAUau/1Jf3js6WvUtoO98SzJy8KvsgN4fBRt6ZJf01D/Tm54bg2MjI0ntM7VLXt5OHkh/6uDXo7VyqjC/VxW+0P7+DpWDzn5+HW1tZql6tlyOl0RyrLa4zllY/Di4uxO2dPlKz2dSQtZhMjnSFMyAak06nUg5n3XU8vpabzcCAQMHn2hpbMZmtFWbnDvLAwuRmPf/r97t7a7u+zOu5SFezLVgQDNthShPJUevpXZu14HgZAp/oH32SySZ+mbaIzMGCdmbwiRnpfA/w/X1bfB8lN0AwdFos0Plds7C/A+Q2NjY325uaeaGXFTn9d7a7E1T1hW05nHUha6mSitIn0kqpMwmTr9B64ObUNHztz/vKh7iMDzCwAJiHIUISuFC7LTBJExBKSAf4yP5fdhtuDYSeb+YYQKGOIhACbpOSXRNTHzA8ZbIWAiyBaWPJ9kOIpiu1Tw9cJsELwOiTapNRuk2JRNWGMKUAdoDgUhoeZ/0iDxopgb09vUFHQzUATwN8YPAWQuvXTOcGoZgEHgPWp6PMLRXAkElFW/moXhUI+SKwKYXxlQd78O0BLzNIuWeiKMA3Hoo9//gNbO95NYH+HjwAAAABJRU5ErkJggg==); |
|||
} |
|||
&:after{ |
|||
content:"水果"; |
|||
} |
|||
} |
|||
.food{ |
|||
--c:16, 193, 118; |
|||
&:before{ |
|||
width:24rpx; |
|||
height:24rpx; |
|||
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAkRJREFUKFM1kF9IU2EYxr/v/Nk52s7cGp45qSTMMbNAmDRFCwSXHOtiSQhGkWVddFEXYRde1FUQNaOrLhIMQS8kb3YROOjCZJFRRoWKiLV0Ttf+tu0c5znnO9+3OELP5fs8P3ifBwIAgL9faldaitf2mwsDwtfaqep1x8zi2/Bn0zshSRzTnYtiQbMxBX4b+np6anK3d34rbRmHGTBln3f/4qa9ravvZxWfz8dqEv9RPaq4IYEl6H3etpC7sHWG0mhClRmCq4wK4AgrTnsWLm97UR5pSlTY9SCXirFVr8Cml63fdHdZZBQLZ9gQYrIWHdWVuZM/GnITxS4vIgS/SMRnP2ysDhVFkYKnRs49Tt5ZHa1ZrMtiq0EohQZyR9r+cCy401slOqPFvzip618eTU1I5rvQL/UfKQTi41qD3FGhgQowUDuXmvaulzz1K0xMrxeL1HqWXYmsVd/8FAlvQpPyDQdu5friIeGnM39X67NpShnJ2i7laSxCwFYBou/DpQT3/Vlo5jwcvHf/qYW3dCqOQqOI7HS78ziLCEZbpU22qZ79PxxIZA24vI1eQenqjdeS1NutaxqgaRZACAEh+CBIUTSoVCoAYwQsHA/m5iLz0H/xUtfQlcF3G7EY73K5AMswwDCMA4BhGIAMA6RSKdDibVbHJycDZgdq+MHosiiKx3jOgmmaIaqqUSbA8xzB2KBUTafT6XR8IvTk9EHps8GBYG3t4THBKgg2wUYnU3/2zLvbVXeoJJewrMhyJpMfiYbfhP8BZDwCZS4yOV4AAAAASUVORK5CYII=); |
|||
} |
|||
&:after{ |
|||
content:"蔬菜"; |
|||
} |
|||
} |
|||
.cause,.date{ |
|||
color:#999; |
|||
font-size:24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<view class="container flex"> |
|||
<d-search :btn="false" popup> |
|||
<u-tabs :list="[{name:'消息类型'},{name:'作物类型'}]" lineColor="#10C176" :activeStyle="{color:'#10C176'}" :inactiveStyle="{color:'#999'}" :itemStyle="{height:'60rpx'}" lineHeight="6rpx" lineWidth="96rpx"/> |
|||
<view class="tabs"> |
|||
<text>害虫</text> |
|||
<text class="active">害虫</text> |
|||
|
|||
</view> |
|||
</d-search> |
|||
<scroll-view scroll-y> |
|||
<view class="card" @click="$u.route({url:'/pages/home/newsDetail'})"> |
|||
<view class="info"> |
|||
<text class="plant-xitongxiaoxi"/> |
|||
<view> |
|||
<view class="title"> |
|||
<text class="over">阳光玫瑰</text> |
|||
<text>病害</text> |
|||
<text class="plant-youbian"/> |
|||
</view> |
|||
<view class="tabs"> |
|||
<text class="germinate">发芽</text> |
|||
<text class="organ">根、茎</text> |
|||
<text class="type">变色</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<text class="fruit"/> |
|||
<text class="food"/> |
|||
<text class="cause over">由于叶子部位病变需要使用水溶肥部位病变需要使用水溶肥</text> |
|||
<text class="date">2023/2/27</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,81 @@ |
|||
<style lang="less" scoped> |
|||
.container{ |
|||
padding:0 30rpx; |
|||
&>view{ |
|||
display:flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding:20rpx 0; |
|||
&+view{ |
|||
border-top:2rpx solid rgba(216, 216, 216, 0.2); |
|||
} |
|||
text{ |
|||
&:first-child{ |
|||
color:var(--b,#777); |
|||
margin-right:20rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
color:var(--f,#333); |
|||
font-size:var(--size,28rpx); |
|||
&.agr{ |
|||
color:#10C176; |
|||
margin-top:13rpx; |
|||
} |
|||
&.account{ |
|||
margin-top:13rpx; |
|||
padding:30rpx; |
|||
border-radius: 24rpx; |
|||
color:#999; |
|||
background: #F7F7F7; |
|||
} |
|||
} |
|||
} |
|||
&.info{ |
|||
--b:#333; |
|||
--f:#777; |
|||
--size:24rpx; |
|||
} |
|||
&.vertical{ |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<view class="container"> |
|||
<view class="info"> |
|||
<text>基本信息</text> <text>推送时间：2023-02-28 10:23:56</text> |
|||
</view> |
|||
<view> |
|||
<text>品种名称</text> <text class="over">阳光玫瑰</text> |
|||
</view> |
|||
<view> |
|||
<text>作物类型</text> <text class="over">葡萄</text> |
|||
</view> |
|||
<view> |
|||
<text>生长过程</text> <text class="over">发芽</text> |
|||
</view> |
|||
<view> |
|||
<text>病虫害部位</text> <text class="over">根、茎</text> |
|||
</view> |
|||
<view> |
|||
<text>显著症状</text> <text class="over">变色</text> |
|||
</view> |
|||
<view class="vertical"> |
|||
<text>推荐农资</text> <text class="agr">水溶肥、复合肥、氮肥</text> |
|||
</view> |
|||
<view class="vertical"> |
|||
<text>推荐理由</text> <text class="account">由于叶子部位病变需要使用水溶肥内容这里是产品介绍内容这里是产品介绍内容这里是产品介绍内容这里是产品介绍内容这里是产品介绍内容</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue