溯源码详情样式修改

zhongrj

2022-07-29 49837c2aa915a8ba2f2f9ac3d3c6e89147ecc43c

 public/traceablityInfos.html

@@ -8,7 +8,7 @@
        .top-log {
            position: relative;
        }
        

        .top-log .btn-grounp {
            position: absolute;
            left: 0;
@@ -20,14 +20,14 @@
            justify-content: space-around;
            background: transparent;
        }
        

        .main-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        

        .main-content .logo {
            position: relative;
            margin-top: 56px;
@@ -36,7 +36,7 @@
            border-radius: 50%;
            overflow: hidden;
        }
        

        .main-content .logo .btn {
            position: absolute;
            bottom: 0;
@@ -48,14 +48,14 @@
            font-size: 24px;
            color: #fff;
        }
        

        .main-content .title {
            margin-top: 30px;
            font-size: 48px;
            font-weight: bold;
            color: #333333;
        }
        

        .main-content .type {
            display: flex;
            margin-top: 10px;
@@ -67,14 +67,14 @@
            border-radius: 8px;
            overflow: hidden;
        }
        

        .main-content .type .sub {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        

        .main-content .type .icon {
            width: 36px;
            display: flex;
@@ -82,7 +82,7 @@
            justify-content: center;
            background: #6AC077;
        }
        

        .main-content .date {
            display: flex;
            align-items: center;
@@ -95,38 +95,38 @@
            font-size: 34px;
            color: #5ABF78;
        }
        

        .model-box {
            margin-top: 60px;
            padding: 0 30px;
        }
        

        .model-box .model-title {
            display: flex;
            align-items: center;
            height: 50px;
        }
        

        .model-box .model-title .l {
            width: 5px;
            height: 36px;
            background: #5ABF78;
        }
        

        .model-box .model-title .title {
            margin-left: 20px;
            font-size: 36px;
            font-weight: bold;
            color: #333333;
        }
        

        .model-box .model-title .border {
            flex: 1;
            margin: 13px;
            border-top: 1px dashed #D4DBE8;
            border-bottom: 1px dashed #D4DBE8;
        }
        

        .model-box .model-title .status {
            display: flex;
            align-items: center;
@@ -134,73 +134,73 @@
            font-size: 24px;
            color: #5ABF78;
        }
        

        .model-box .model-title .statu.no {
            color: #EC9144;
        }
        

        .model-box .model-title .status view {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        

        .model-box.qw .model-content {
            display: flex;
            flex-direction: column;
            margin-top: 30px;
            height: 642px;
            /* height: 642px; */
            background: #fff;
            border-radius: 30px;
        }
        

        .model-box.qw .model-content .box:first-child {
            border: 2px solid #EEEEEE;
        }
        

        .model-box.qw .model-content .box {
            flex: 1;
            display: flex;
            padding: 30px;
        }
        

        .model-box.qw .model-content .box>.r {
            margin-left: 26px;
            flex: 1;
            font-size: 24px;
        }
        

        .model-box.qw .model-content .box>.r .title {
            font-size: 32px;
            font-weight: bold;
            color: #333333;
        }
        

        .model-box.qw .model-content .box>.r .line-box {
            margin-top: 16px;
            display: flex;
        }
        

        .model-box.qw .model-content .box>.r .line-box .sub {
            width: 120px;
            color: #333333;
            line-height: 36px;
        }
        

        .model-box.qw .model-content .box>.r .line-box .content {
            flex: 1;
            color: #666666;
            line-height: 36px;
        }
        /* 容器 */
        

        .model-box.cd .model-content {
            margin-top: 30px;
            background: #fff;
            border-radius: 30px;
        }
        /* 头部 */
        

        .model-box.cd .model-content .content-header {
            display: flex;
            align-items: center;
@@ -209,33 +209,33 @@
            font-size: 30px;
            color: #5ABF78;
        }
        

        .model-box.cd .model-content.jk .content-header {
            color: #A255B5;
            border-bottom: 2px solid #ECECEC;
        }
        /* 中间 */
        

        .model-box.cd .model-content.dk .content-body {
            height: 450px;
            background: greenyellow;
        }
        

        .model-box.cd .model-content.jksp .content-body {
            height: 385px;
            background: #A255B5;
        }
        

        .model-box.cd .model-content.jk .content-body {
            border-bottom: 1px solid transparent;
        }
        

        .model-box.cd .model-content.jk .content-body .site-box {
            margin: 26px 22px;
            border-radius: 28px;
            border: 2px solid #E3E3E3;
        }
        

        .model-box.cd .model-content.jk .content-body .site-box .site-title {
            padding: 0 22px;
            margin-top: 10px;
@@ -247,7 +247,7 @@
            font-weight: bold;
            color: #333333;
        }
        

        .model-box.cd .model-content.jk .content-body .site-box .site-date {
            display: flex;
            align-items: center;
@@ -256,7 +256,7 @@
            height: 2px;
            background: #ECECEC;
        }
        

        .model-box.cd .model-content.jk .content-body .site-box .site-date .site-date-text {
            padding: 0 18px;
            height: 36px;
@@ -265,14 +265,14 @@
            font-size: 24px;
            color: #929292;
        }
        

        .model-box.cd .model-content.jk .content-body .site-box .site-content {
            padding: 24px 22px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        

        .model-box.cd .model-content.jk .content-body .site-box .site-content>view {
            display: flex;
            align-items: center;
@@ -284,45 +284,45 @@
            border-radius: 8px;
            box-sizing: border-box;
        }
        

        .model-box.cd .model-content.jk .content-body .site-box .site-content>view:nth-child(1),
        .model-box.cd .model-content.jk .content-body .site-box .site-content>view:nth-child(2) {
            margin-top: 0;
        }
        

        .model-box.cd .model-content.jk .content-body .site-box .site-content>view .type {
            font-size: 28px;
            color: #333333;
        }
        

        .model-box.cd .model-content.jk .content-body .site-box .site-content>view .unit {
            margin-top: 4px;
            font-size: 24px;
            color: #84898F;
        }
        

        .model-box.cd .model-content.jk .content-body .site-box .site-content>view .r {
            font-size: 38px;
            color: #5ABF78;
        }
        /* 底部 */
        

        .model-box.cd .model-content .content-footer {
            display: flex;
            align-items: center;
            height: 120px;
            font-size: 24px;
        }
        

        .model-box.cd .model-content.dk .content-footer {
            padding: 0 26px;
        }
        

        .model-box.cd .model-content.dk .content-footer .l {
            width: 480px;
            color: #666666;
        }
        

        .model-box.cd .model-content.dk .content-footer .r {
            flex: 1;
            display: flex;
@@ -330,11 +330,11 @@
            justify-content: center;
            color: #5ABF78;
        }
        

        .model-box.cd .model-content.jksp .content-footer {
            padding: 0 30px;
        }
        

        .model-box.cd .model-content.jksp .content-footer .equi-btn {
            display: flex;
            align-items: center;
@@ -348,28 +348,28 @@
            font-size: 24px;
            color: #697580;
        }
        

        .model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
            margin-left: 0;
        }
        

        .model-box.cd .model-content.jksp .content-footer .equi-btn.on {
            background: linear-gradient(90deg, #5ABB82 0%, #7BDA8F 100%);
            border: none;
            color: #fff;
        }
        /* 种植环节 */
        

        .model-box.zz .model-content {
            margin-top: 30px;
        }
        

        .model-box.zz .model-content .msg {
            display: flex;
            align-items: center;
            height: 126px;
        }
        

        .model-box.zz .model-content .msg .r {
            margin-left: 30px;
            padding: 10px 26px;
@@ -380,17 +380,17 @@
            color: #999999;
            border-radius: 16px;
        }
        

        .model-box.zz .model-content .msg .r text {
            font-weight: bold;
            color: #EC9144;
        }
        

        .model-box.zz .model-content .msg .r .r-b-msg {
            margin-top: 10px;
            color: #333333;
        }
        

        .model-box.zz .model-content .msg .r .point-to {
            position: absolute;
            top: 0;
@@ -405,12 +405,12 @@
            border-bottom: 14px solid transparent;
            z-index: -1;
        }
        

        .model-box.zz .model-content .record-box {
            display: flex;
            align-items: center;
        }
        

        .model-box.zz .model-content .record-box .l {
            margin-left: 40px;
            display: flex;
@@ -418,56 +418,56 @@
            align-items: center;
            justify-content: center;
        }
        

        .model-box.zz .model-content .record-box .l .point {
            width: 20px;
            height: 20px;
            background: #5ABF78;
            border-radius: 50%;
        }
        

        .model-box.zz .model-content .record-box .l .line {
            width: 2px;
            height: 150px;
            background: #DEE3E7;
        }
        

        .model-box.zz .model-content .record-box .l .line.one {
            width: 2px;
            height: 100px;
            background: #DEE3E7;
        }
        

        .model-box.zz .model-content .record-box .l .line.two {
            width: 2px;
            height: 100px;
            background: #DEE3E7;
        }
        

        .model-box.zz .model-content .record-box .r {
            margin-left: 64px;
            flex: 1;
        }
        

        .model-box.zz .model-content .record-box .r .record-item {
            margin-top: 30px;
            padding: 32px 30px 42px;
            background: #FFFFFF;
            border-radius: 30px;
        }
        

        .model-box.zz .model-content .record-box .r .record-item .type {
            font-size: 32px;
            font-weight: bold;
            color: #333333;
        }
        

        .model-box.zz .model-content .record-box .r .record-item .date-pel {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }
        

        .model-box.zz .model-content .record-box .r .record-item .date-pel .date {
            padding: 2px 20px;
            font-size: 24px;
@@ -475,20 +475,20 @@
            background: linear-gradient(89deg, #60BA84 0%, #73DB90 100%);
            border-radius: 10px;
        }
        

        .model-box.zz .model-content .record-box .r .record-item .date-pel .pel {
            font-size: 28px;
            color: #666666;
        }
        /* 生产企业 */
        

        .model-box.sc .model-content {
            margin-top: 30px;
            /* padding-bottom: 30px; */
            background: #fff;
            border-radius: 30px;
        }
        

        .model-box.sc .model-content .content-header {
            display: flex;
            align-items: center;
@@ -498,26 +498,26 @@
            font-weight: bold;
            color: #000000;
        }
        

        .model-box.sc .model-content .content-body {
            height: 390px;
        }
        

        .model-box.sc .model-content .content-body .swiper {
            height: 100%;
            width: 100%;
        }
        

        .model-box.sc .model-content .content-body .swiper-image {
            height: 100%;
            width: 100%;
        }
        

        .model-box.sc .model-content .content-body .slide-image {
            height: 100%;
            width: 100%;
        }
        

        .model-box.sc .model-content .text-intro {
            margin: 0 25px;
            padding: 20px 0 34px;
@@ -526,26 +526,26 @@
            color: #818592;
            border-bottom: 2px solid #EAEEF4;
        }
        

        .model-box.sc .model-content .content-footer {
            margin-top: 24px;
            display: flex;
            align-items: flex-start;
            justify-content: space-around;
        }
        

        .model-box.sc .model-content .content-footer>view {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        

        .model-box.sc .model-content .content-footer>view .type {
            margin-top: 6px;
            font-size: 24px;
            color: #697580;
        }
        

        .model-box.sc .model-content .content-footer>view .msg {
            margin-top: 2px;
            padding: 2px 6px;
@@ -554,14 +554,14 @@
            font-size: 20px;
            color: #697580;
        }
        

        .btn-grounp {
            margin-top: 84px;
            display: flex;
            height: 148px;
            background: #FFFFFF;
        }
        

        .btn-grounp .l {
            margin-right: 76px;
            width: 194px;
@@ -570,19 +570,19 @@
            align-items: center;
            justify-content: center;
        }
        

        .btn-grounp .l .plan {
            font-size: 34px;
            font-weight: bold;
            color: #D55B26;
        }
        

        .btn-grounp .l .text {
            margin-top: 2px;
            font-size: 20px;
            color: #A5AEB5;
        }
        

        .btn-grounp .r {
            flex: 1;
            display: flex;
@@ -611,7 +611,7 @@
        };
        var code = getData("code");

        // var code = "22060000002";
        // var code = "22070000002";


        axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfo?code=' + code).then(function(res) {
@@ -703,7 +703,7 @@
            }


            var str2 = ` 
            var str2 = `
            </div>
        </div>

@@ -1037,4 +1037,4 @@
    </script>
</body>

</html>
</html>