.

src/views/deliveryRoomManagement/detail/Detail.vue

@@ -18,22 +18,34 @@
 
         <section class="section">
             <article class="left">
+                <div class="contianer">
+                    <el-carousel height="300px" indicator-position="none" :interval="3000">
+                        <el-carousel-item v-for="item in images" :key="item">
+                            <img @click="toSowDetail" :src="'http://119.3.84.55:31288/' + item" />
+                        </el-carousel-item>
+                    </el-carousel>
+                </div>
+            </article>
+
+            <article class="right">
                 <ul class="ul">
                     <li class="li">
                         <span class="title">产仔数：</span>
-                        <span class="content">9只</span>
+                        <span class="content" style="font-size: 26px">9只</span>
                     </li>
                     <li class="li">
                         <span class="title">活仔数：</span>
-                        <span class="content">9只</span>
+                        <!-- 小于等于八只的标红 -->
+                        <span class="content" style="font-size: 26px">9只</span>
                     </li>
                     <li class="li">
                         <span class="title">存活率：</span>
-                        <span class="content">100%</span>
+                        <!-- 小于等于80%的标红 -->
+                        <span class="content" style="font-size: 26px">100%</span>
                     </li>
                     <li class="li">
                         <span class="title">仔猪日龄：</span>
-                        <span class="content">12天</span>
+                        <span class="content" style="font-size: 26px">12天</span>
                     </li>
                     <li class="li">
                         <span class="title">产床状态：</span>
@@ -49,19 +61,6 @@
                     </li>
                 </ul>
             </article>
-
-            <article class="right">
-                <div class="contianer">
-                    <el-carousel height="250px" indicator-position="none">
-                        <el-carousel-item v-for="item in images" :key="item">
-                            <img
-                                @click="toSowDetail"
-                                :src="'http://119.3.84.55:31288/' + item"
-                            />
-                        </el-carousel-item>
-                    </el-carousel>
-                </div>
-            </article>
         </section>
 
         <footer class="footer">
@@ -79,8 +78,7 @@
 import chart_a from "./charts/chart_a";
 import chart_b from "./charts/chart_b";
 
-import { reqDeliveryRoomInfo } from "@/api/deliveryRoomManagement.js"
-
+import { reqDeliveryRoomInfo } from "@/api/deliveryRoomManagement.js";
 
 // 时间选择器配置
 const pickerOptions = {
@@ -128,30 +126,29 @@ export default {
             hoursD: [],
             hoursT: [],
             daysD: [],
-            daysT: [],
+            daysT: []
         };
     },
     created() {
-        this.getDeliveryRoomInfo({bedNo: "10086-1"})
+        this.getDeliveryRoomInfo({ bedNo: "10086-1" });
     },
     methods: {
         // 请求厂房列表
         getDeliveryRoomInfo(data) {
             reqDeliveryRoomInfo(data)
                 .then(res => {
-                    this.images = res.value.images
+                    this.images = res.value.images;
                     res.value.thours.forEach(item => {
-                        this.hoursD.push(item.temperature.toFixed(2))
-                        this.hoursT.push(item.timestamp.substr(0,14))
+                        this.hoursD.push(item.temperature.toFixed(2));
+                        this.hoursT.push(item.timestamp.substr(0, 14));
                     });
                     res.value.tdays.forEach(item => {
-                        this.daysD.push(item.temperature.toFixed(2))
-                        this.daysT.push(item.timestamp.substr(0,10))
+                        this.daysD.push(item.temperature.toFixed(2));
+                        this.daysT.push(item.timestamp.substr(0, 10));
                     });
-                    
                 })
                 .catch(err => {
-                    console.error( err);
+                    console.error(err);
                 });
         },
         pickerChange(value) {
@@ -193,48 +190,45 @@ export default {
     .section {
         display: flex;
         padding-bottom: 20px;
-        border-bottom: 2px solid #eee;
+        margin: 0 70px;
+        border-bottom: 3px solid #ccc;
         .left {
-            padding-left: 70px;
-            width: 40%;
-            // border: 2px solid rgb(182, 63, 63);
+            width: 600px;
+            // border: 2px solid rgb(63, 182, 69);
+            .contianer {
+                width: 600px;
+                border-radius: 6px;
+                overflow: hidden;
+                img {
+                    width: 100%;
+                    // height: 300px;
+                }
+            }
+        }
+        .right {
+            padding-left: 40px;
             .ul {
                 .li {
-                    margin: 5px 0 5px 10px;
+                    margin: 5px 0 10px 10px;
                     .title {
-                        font-size: 17px;
-                        font-weight: 600;
+                        font-size: 20px;
                         color: rgb(136, 115, 115);
                     }
                     .content {
-                        font-size: 18px;
+                        font-size: 19px;
                         font-weight: 600;
                         color: rgb(139, 138, 138);
                     }
                 }
             }
         }
-        .right {
-            flex: 1;
-            // border: 2px solid rgb(63, 182, 69);
-            .contianer {
-                width: 500px;
-                height: 250px;
-                border-radius: 6px;
-                overflow: hidden;
-                img {
-                    width: 100%;
-                    height: 250px;
-                }
-            }
-        }
     }
     .footer {
         margin-top: 20px;
         .h {
             border-bottom: 2px solid #eee;
         }
-        .d{
+        .d {
             padding-top: 15px;
         }
     }