|
@@ -82,7 +82,7 @@
|
|
<van-col
|
|
<van-col
|
|
span="12"
|
|
span="12"
|
|
style="padding: 2px 0px 0px 0"
|
|
style="padding: 2px 0px 0px 0"
|
|
- @click="goto('/referMenu', '实时监控')"
|
|
|
|
|
|
+ @click="goto('/live', '实时监控')"
|
|
>
|
|
>
|
|
<div class="card">
|
|
<div class="card">
|
|
<img
|
|
<img
|
|
@@ -93,7 +93,7 @@
|
|
<p class="first">实时监控</p>
|
|
<p class="first">实时监控</p>
|
|
<p class="second">全程溯源信赖保证</p>
|
|
<p class="second">全程溯源信赖保证</p>
|
|
<div class="lastP">
|
|
<div class="lastP">
|
|
- <span>查看更多</span>
|
|
|
|
|
|
+ <p>查看更多</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="camera">
|
|
<div class="camera">
|
|
@@ -356,16 +356,20 @@ export default {
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 8px;
|
|
left: 8px;
|
|
top: 25px;
|
|
top: 25px;
|
|
-
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
.riceBag-title {
|
|
.riceBag-title {
|
|
|
|
+ margin: 0;
|
|
// width: 26.5px;
|
|
// width: 26.5px;
|
|
|
|
+ transform: scale(0.8);
|
|
width: 36.5px;
|
|
width: 36.5px;
|
|
- height: 8.5px;
|
|
|
|
|
|
+ height: 17.5px;
|
|
font-size: 0.5rem;
|
|
font-size: 0.5rem;
|
|
font-family: Source Han Sans CN;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 150;
|
|
font-weight: 150;
|
|
color: #f1cda9;
|
|
color: #f1cda9;
|
|
- line-height: 13px;
|
|
|
|
|
|
+ line-height: 16.5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.riceBox {
|
|
.riceBox {
|
|
@@ -377,17 +381,19 @@ export default {
|
|
position: absolute;
|
|
position: absolute;
|
|
right: 120px;
|
|
right: 120px;
|
|
top: 25px;
|
|
top: 25px;
|
|
-
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
.riceBox-title {
|
|
.riceBox-title {
|
|
|
|
+ margin: 0;
|
|
// width: 26.5px;
|
|
// width: 26.5px;
|
|
|
|
+ transform: scale(0.8);
|
|
width: 36.5px;
|
|
width: 36.5px;
|
|
- height: 8.5px;
|
|
|
|
|
|
+ height: 17.5px;
|
|
font-size: 0.75rem;
|
|
font-size: 0.75rem;
|
|
-
|
|
|
|
font-family: Source Han Sans CN;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 150;
|
|
font-weight: 150;
|
|
color: #f1cda9;
|
|
color: #f1cda9;
|
|
- line-height: 13px;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -449,10 +455,16 @@ export default {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 15vh;
|
|
top: 15vh;
|
|
left: 4vw;
|
|
left: 4vw;
|
|
- span {
|
|
|
|
- width: 28px;
|
|
|
|
- height: 6.5px;
|
|
|
|
- font-size: 0.6rem;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ p {
|
|
|
|
+ margin: 0;
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
+ width: 48px;
|
|
|
|
+ height: 12px;
|
|
|
|
+ line-height: 12px;
|
|
|
|
+ font-size: 0.5rem;
|
|
font-family: Source Han Sans CN;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 300;
|
|
font-weight: 300;
|
|
color: #c5a06b;
|
|
color: #c5a06b;
|
|
@@ -631,113 +643,98 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- @media screen and (max-width: 320px) {
|
|
|
|
- .productPack .box {
|
|
|
|
- p {
|
|
|
|
- margin: 7.5px 0 7px 4px;
|
|
|
|
- }
|
|
|
|
- span {
|
|
|
|
- margin: 12.5px 0 0px 8px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ @media screen and (max-width: 414px) {
|
|
.middle .card {
|
|
.middle .card {
|
|
.first {
|
|
.first {
|
|
- font-size: 0.9rem;
|
|
|
|
- left: 3vw;
|
|
|
|
- top: 9vh;
|
|
|
|
|
|
+ // margin-top: 27px;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ left: 4vw;
|
|
|
|
+ top: 7vh;
|
|
}
|
|
}
|
|
.second {
|
|
.second {
|
|
- top: 12vh;
|
|
|
|
- left: 3vw;
|
|
|
|
- font-size: 0.7rem;
|
|
|
|
|
|
+ font-size: 11px;
|
|
}
|
|
}
|
|
.lastP {
|
|
.lastP {
|
|
- top: 18vh;
|
|
|
|
- left: 4vw;
|
|
|
|
- span {
|
|
|
|
- font-size: 0.6rem;
|
|
|
|
- }
|
|
|
|
|
|
+ left: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- .middle .camera {
|
|
|
|
- left: 22vw;
|
|
|
|
- top: 8vh;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
.middle .cardTwo {
|
|
.middle .cardTwo {
|
|
.first {
|
|
.first {
|
|
- left: 45vw;
|
|
|
|
- top: 16vh;
|
|
|
|
- font-size: 14px;
|
|
|
|
|
|
+ left: 44vw;
|
|
|
|
+ top: 15vh;
|
|
}
|
|
}
|
|
.second {
|
|
.second {
|
|
- left: 45vw;
|
|
|
|
- top: 9vh;
|
|
|
|
|
|
+ left: 44vw;
|
|
|
|
+ top: 8vh;
|
|
|
|
+ }
|
|
|
|
+ .keepAlive {
|
|
|
|
+ width: 11.5vw;
|
|
|
|
+ left: 70vw;
|
|
|
|
+ top: 5vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- .middle .keepAlive {
|
|
|
|
- width: 11.5vw;
|
|
|
|
|
|
+ //
|
|
|
|
+ .middle .freshRice {
|
|
|
|
+ top: 16vh;
|
|
left: 70vw;
|
|
left: 70vw;
|
|
- top: 6vh;
|
|
|
|
}
|
|
}
|
|
- .middle .cardFour {
|
|
|
|
|
|
+ .middle .cardThree {
|
|
.first {
|
|
.first {
|
|
- font-size: 0.9rem;
|
|
|
|
-
|
|
|
|
- left: 4vw;
|
|
|
|
- top: 32vh;
|
|
|
|
|
|
+ left: 48vw;
|
|
|
|
+ top: 18vh;
|
|
}
|
|
}
|
|
.second {
|
|
.second {
|
|
- font-size: 0.5rem;
|
|
|
|
- top: 34vh;
|
|
|
|
- left: 4vw;
|
|
|
|
|
|
+ left: 48vw;
|
|
|
|
+ top: 20vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
- //
|
|
|
|
- .middle .freshRice {
|
|
|
|
- top: 18vh;
|
|
|
|
- left: 70vw;
|
|
|
|
- }
|
|
|
|
- .middle .cardThree .first {
|
|
|
|
- left: 48vw;
|
|
|
|
- top: 19vh;
|
|
|
|
- }
|
|
|
|
- .middle .cardThree .second {
|
|
|
|
- left: 48vw;
|
|
|
|
- top: 21vh;
|
|
|
|
- }
|
|
|
|
- .middle .cardFive .first {
|
|
|
|
- top: 41vh;
|
|
|
|
- font-size: 0.9rem;
|
|
|
|
|
|
+ .middle .cardFour {
|
|
|
|
+ .first {
|
|
|
|
+ left: 16px;
|
|
|
|
+ top: 230px;
|
|
|
|
+ }
|
|
|
|
+ .second {
|
|
|
|
+ left: 16px;
|
|
|
|
+ top: 242px;
|
|
|
|
+ }
|
|
|
|
+ .normalGrow {
|
|
|
|
+ left: 25vw;
|
|
|
|
+ top: 30vh;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- .middle .cardFive .second {
|
|
|
|
- top: 34vh;
|
|
|
|
|
|
+ .middle .cardFive {
|
|
|
|
+ .first,
|
|
|
|
+ .second {
|
|
|
|
+ left: 44vw;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.detail li .riceBox {
|
|
.detail li .riceBox {
|
|
- right: 94px;
|
|
|
|
|
|
+ right: 137px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- @media screen and (min-width: 375px) {
|
|
|
|
- .middle .card .first {
|
|
|
|
- // margin-top: 27px;
|
|
|
|
- font-size: 16px;
|
|
|
|
- left: 4vw;
|
|
|
|
- top: 9vh;
|
|
|
|
- }
|
|
|
|
- .middle .card .second {
|
|
|
|
- top: 12vh;
|
|
|
|
- left: 4vw;
|
|
|
|
- }
|
|
|
|
- .middle .card .lastP {
|
|
|
|
- top: 17vh;
|
|
|
|
- left: 5vw;
|
|
|
|
- span {
|
|
|
|
- font-size: 0.6rem;
|
|
|
|
|
|
+ @media screen and (max-width: 375px) {
|
|
|
|
+ .middle .card {
|
|
|
|
+ .first {
|
|
|
|
+ // margin-top: 27px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ left: 4vw;
|
|
|
|
+ top: 9vh;
|
|
|
|
+ }
|
|
|
|
+ .second {
|
|
|
|
+ top: 12vh;
|
|
|
|
+ left: 4vw;
|
|
|
|
+ }
|
|
|
|
+ .lastP {
|
|
|
|
+ top: 17vh;
|
|
|
|
+ left: 5vw;
|
|
|
|
+ span {
|
|
|
|
+ font-size: 0.6rem;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.middle .cardTwo {
|
|
.middle .cardTwo {
|
|
.first {
|
|
.first {
|
|
left: 44vw;
|
|
left: 44vw;
|
|
@@ -792,65 +789,211 @@ export default {
|
|
top: 33vh;
|
|
top: 33vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .detail li .riceBox {
|
|
|
|
+ right: 120px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- @media screen and (min-width: 414px) {
|
|
|
|
- .middle .card .second {
|
|
|
|
- font-size: 11px;
|
|
|
|
|
|
+ @media screen and (max-width: 360px) {
|
|
|
|
+ .detail li .riceBox {
|
|
|
|
+ right: 113px;
|
|
}
|
|
}
|
|
- .middle .card .first {
|
|
|
|
- // margin-top: 27px;
|
|
|
|
- font-size: 18px;
|
|
|
|
- left: 4vw;
|
|
|
|
- top: 9vh;
|
|
|
|
|
|
+ .middle .card {
|
|
|
|
+ .first {
|
|
|
|
+ // margin-top: 27px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ left: 4vw;
|
|
|
|
+ top: 9vh;
|
|
|
|
+ }
|
|
|
|
+ .second {
|
|
|
|
+ top: 12vh;
|
|
|
|
+ left: 4vw;
|
|
|
|
+ }
|
|
|
|
+ .lastP {
|
|
|
|
+ top: 17vh;
|
|
|
|
+ left: 5vw;
|
|
|
|
+ span {
|
|
|
|
+ font-size: 0.6rem;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.middle .cardTwo {
|
|
.middle .cardTwo {
|
|
.first {
|
|
.first {
|
|
- left: 44vw;
|
|
|
|
- top: 15vh;
|
|
|
|
|
|
+ left: 157px;
|
|
|
|
+ top: 99px;
|
|
}
|
|
}
|
|
.second {
|
|
.second {
|
|
- left: 44vw;
|
|
|
|
- top: 8vh;
|
|
|
|
|
|
+ left: 157px;
|
|
|
|
+ top: 55px;
|
|
|
|
+ }
|
|
|
|
+ .keepAlive {
|
|
|
|
+ width: 13vw;
|
|
|
|
+ left: 243px;
|
|
|
|
+ top: 32px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .middle .cardThree {
|
|
|
|
+ .first {
|
|
|
|
+ left: 170px;
|
|
|
|
+ top: 119px;
|
|
|
|
+ }
|
|
|
|
+ .second {
|
|
|
|
+ left: 170px;
|
|
|
|
+ top: 133px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .middle .freshRice {
|
|
|
|
+ top: 17vh;
|
|
|
|
+ left: 70vw;
|
|
|
|
+ }
|
|
|
|
+ .middle .cardFour {
|
|
|
|
+ .first {
|
|
|
|
+ left: 17px;
|
|
|
|
+ top: 200px;
|
|
|
|
+ }
|
|
|
|
+ .second {
|
|
|
|
+ top: 212px;
|
|
|
|
+ left: 17px;
|
|
|
|
+ }
|
|
|
|
+ .normalGrow {
|
|
|
|
+ left: 26vw;
|
|
|
|
+ top: 30vh;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .middle .cardFive {
|
|
|
|
+ .first {
|
|
|
|
+ left: 158px;
|
|
|
|
+ top: 255px;
|
|
|
|
+ }
|
|
|
|
+ .second {
|
|
|
|
+ left: 158px;
|
|
|
|
+ top: 213px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ @media screen and (max-width: 320px) {
|
|
|
|
+ .productPack .box {
|
|
|
|
+ p {
|
|
|
|
+ margin: 7.5px 0 7px 4px;
|
|
|
|
+ }
|
|
|
|
+ span {
|
|
|
|
+ margin: 12.5px 0 0px 8px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .middle .card {
|
|
|
|
+ .first {
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
+ left: 12px;
|
|
|
|
+ top: 9vh;
|
|
|
|
+ }
|
|
|
|
+ .second {
|
|
|
|
+ top: 64px;
|
|
|
|
+ left: 7px;
|
|
|
|
+ font-size: 0.7rem;
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
+ }
|
|
|
|
+ .lastP {
|
|
|
|
+ top: 18vh;
|
|
|
|
+ left: 4vw;
|
|
|
|
+ span {
|
|
|
|
+ font-size: 0.6rem;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .middle .camera {
|
|
|
|
+ left: 22vw;
|
|
|
|
+ top: 8vh;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .middle .cardTwo {
|
|
|
|
+ .first {
|
|
|
|
+ left: 138px;
|
|
|
|
+ top: 90px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+ .second {
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
+
|
|
|
|
+ left: 134px;
|
|
|
|
+ top: 51px;
|
|
|
|
+ font-size: 0.7rem;
|
|
|
|
+ }
|
|
|
|
+ .keepAlive {
|
|
|
|
+ width: 13vw;
|
|
|
|
+ left: 223px;
|
|
|
|
+ top: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.middle .keepAlive {
|
|
.middle .keepAlive {
|
|
width: 11.5vw;
|
|
width: 11.5vw;
|
|
left: 70vw;
|
|
left: 70vw;
|
|
- top: 5vh;
|
|
|
|
|
|
+ top: 6vh;
|
|
|
|
+ }
|
|
|
|
+ .middle .cardFour {
|
|
|
|
+ .first {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+
|
|
|
|
+ left: 11px;
|
|
|
|
+ top: 184px;
|
|
|
|
+ }
|
|
|
|
+ .second {
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
+
|
|
|
|
+ font-size: 0.7rem;
|
|
|
|
+ left: 7px;
|
|
|
|
+ top: 194px;
|
|
|
|
+ }
|
|
|
|
+ .normalGrow {
|
|
|
|
+ left: 81px;
|
|
|
|
+ top: 178px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
//
|
|
.middle .freshRice {
|
|
.middle .freshRice {
|
|
- top: 16vh;
|
|
|
|
|
|
+ top: 18vh;
|
|
left: 70vw;
|
|
left: 70vw;
|
|
}
|
|
}
|
|
.middle .cardThree {
|
|
.middle .cardThree {
|
|
.first {
|
|
.first {
|
|
- left: 50vw;
|
|
|
|
- top: 18vh;
|
|
|
|
- }
|
|
|
|
- .second {
|
|
|
|
- left: 50vw;
|
|
|
|
- top: 20vh;
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ left: 148px;
|
|
|
|
+ top: 107px;
|
|
}
|
|
}
|
|
- }
|
|
|
|
- .middle .cardThree {
|
|
|
|
- .first,
|
|
|
|
.second {
|
|
.second {
|
|
- left: 48vw;
|
|
|
|
|
|
+ left: 143px;
|
|
|
|
+ top: 118px;
|
|
|
|
+ transform: scale(0.8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.middle .cardFive {
|
|
.middle .cardFive {
|
|
- .first,
|
|
|
|
|
|
+ .first {
|
|
|
|
+ top: 233px;
|
|
|
|
+ left: 137px;
|
|
|
|
+
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
.second {
|
|
.second {
|
|
- left: 44vw;
|
|
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
+
|
|
|
|
+ top: 194px;
|
|
|
|
+ left: 132px;
|
|
|
|
+
|
|
|
|
+ font-size: 0.7rem;
|
|
|
|
+ }
|
|
|
|
+ .organic {
|
|
|
|
+ left: 221px;
|
|
|
|
+ top: 178px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.detail li .riceBox {
|
|
.detail li .riceBox {
|
|
- right: 137px;
|
|
|
|
|
|
+ right: 94px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
@media screen and (min-height: 812px) {
|
|
@media screen and (min-height: 812px) {
|
|
.middle .card .first {
|
|
.middle .card .first {
|
|
// margin-top: 27px;
|
|
// margin-top: 27px;
|