Jelajahi Sumber

feat:添加照片管理提示和下拉框样式

wangsisi 22 jam lalu
induk
melakukan
cee4861987

TEMPAT SAMPAH
src/assets/images/home/fly-bg.png


TEMPAT SAMPAH
src/assets/images/home/fly-icon.png


TEMPAT SAMPAH
src/assets/images/home/legend-img.png


TEMPAT SAMPAH
src/assets/images/home/legend.png


TEMPAT SAMPAH
src/assets/images/home/ns-tabs.png


+ 71 - 29
src/views/home/components/leftTabs/imgManage.vue

@@ -2,19 +2,29 @@
     <div class="img-manage">
         <div class="select-group">
             <el-date-picker
+                class="date-picker"
                 v-model="dateTime"
                 @change="changeDate"
                 size="large"
-                type="month"
-                format="YYYY年MM月"
-                value-format="YYYY-MM"
+                type="date"
+                format="YYYY年MM月DD日"
+                value-format="YYYY-MM-DD"
                 :style="{ width: '100%' }"
             />
             <el-select class="select" v-model="value" size="large">
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
         </div>
-        <img class="fly" src="@/assets/images/home/fly-bg.png" alt="">
+        <div class="fly-box">
+            <img class="icon" src="@/assets/images/home/fly-icon.png" alt="" />
+            <div class="fly-r">
+                <div class="text">
+                    <el-icon color="#2199F8" size="20"><WarningFilled /></el-icon>
+                    <span>飞鸟提醒 今日是飞巡日,请立即飞巡</span>
+                </div>
+                <div class="btn">立即巡飞</div>
+            </div>
+        </div>
         <div class="photo-list">
             <div class="photo-item" v-for="(item, index) in imageList" :key="index">
                 <album-carousel-item
@@ -38,7 +48,7 @@ const resize = "?imageView/1/w/240/h/240";
 
 function getCurrentMonth() {
     const now = new Date();
-    const formattedDate = now.toISOString().slice(0, 7);
+    const formattedDate = now.toISOString().slice(0, 10);
     return formattedDate;
 }
 
@@ -122,10 +132,10 @@ const geImgaeList = () => {
             weather: null,
             workspaceId: "",
             code: formatDatePart("2505111813_T_WSPM_110.802_21.473"),
-            treeCode:"2505111813_T_WSPM_110.802_21.473",
+            treeCode: "2505111813_T_WSPM_110.802_21.473",
             sampleId: "873",
             filename: "shuichan/DJI_20250511181340_0001_T_code-w7yf1kgwzqhb.JPG",
-            url:'https://birdseye-img.sysuimars.com/shuichan/DJI_20250514163710_0004_T_code-w7ydmzr9ctry.JPG?imageView/1/w/240/h/240'
+            url: "https://birdseye-img.sysuimars.com/shuichan/DJI_20250514163710_0004_T_code-w7ydmzr9ctry.JPG?imageView/1/w/240/h/240",
         },
     ];
     // res.data.map((item) => {
@@ -167,30 +177,62 @@ function formatDatePart(originalStr) {
             width: 140px;
             margin-left: 5px;
         }
-        // ::v-deep {
-        //     .el-select__wrapper {
-        //         background: rgba(255, 255, 255, 0.07);
-        //         box-shadow: none;
-        //     }
-        //     .el-select__placeholder,
-        //     .el-select__caret,
-        //     .el-input__prefix {
-        //         color: #fff;
-        //         text-align: center;
-        //     }
-        //     .el-input__wrapper {
-        //         background: #323232;
-        //         box-shadow: none;
-        //     }
-        //     .el-input__inner {
-        //         color: #fff;
-        //     }
-        // }
+        ::v-deep {
+            //日历
+            .el-input__prefix,.el-input__suffix {
+                color: #fff;
+                text-align: center;
+            }
+            .el-input__wrapper {
+                background: #2199f8;
+                box-shadow: none;
+            }
+            .el-input__inner {
+                color: #fff;
+            }
+            //下拉框
+            .el-select__placeholder,.el-select__caret{
+                color: #2199f8;
+            }
+            .el-select__wrapper {
+                box-shadow: none;
+                border: 1px solid #2199F8;
+            }
+        }
     }
-    .fly{
-        width: 100%;
-        height: 70px;
+    .fly-box {
         margin-bottom: 10px;
+        border: 1px solid rgba(33, 153, 248, 0.74);
+        border-radius: 5px;
+        padding: 7px 10px;
+        display: flex;
+        align-items: center;
+        .icon {
+            width: 48px;
+            height: 48px;
+            margin-right: 10px;
+        }
+        .fly-r {
+            .text {
+                display: flex;
+                align-items: center;
+                color: #000;
+                font-weight: 500;
+                span {
+                    margin-left: 5px;
+                }
+            }
+            .btn {
+                margin-top: 6px;
+                text-align: center;
+                font-size: 12px;
+                width: 68px;
+                padding: 5px 0;
+                border-radius: 5px;
+                background: #2199f8;
+                font-family: "PangMenZhengDao";
+            }
+        }
     }
     .photo-list {
         display: flex;