feat: 种植分析详情背景

babel.config.js

@@ -1,3 +1,12 @@
 module.exports = {
-  presets: [`@vue/cli-plugin-babel/preset`],
+  presets: [`@vue/cli-plugin-babel/preset`, [`es2015`, { modules: false }]],
+  plugins: [
+    [
+      `component`,
+      {
+        libraryName: `element-ui`,
+        styleLibraryName: `theme-chalk`,
+      },
+    ],
+  ],
 }

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.7.7",
     "core-js": "^3.6.4",
     "dayjs": "^1.11.13",
+    "element-ui": "^2.15.14",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
     "vue-seamless-scroll": "^1.1.21",

src/assets/styles/common.less

@@ -20,4 +20,16 @@
   background-repeat: no-repeat;
   width: 1920px;
   height: 1080px;
+}
+.g-bg3 {
+  background-image: url('~@/assets/img2/种植分析详情/bg右.png'),
+    url('~@/assets/img2/种植分析详情/bg左.png'),
+    url('~@/assets/img2/种植分析详情/bg上.png'),
+    url('~@/assets/img2/综合总览/背景.png');
+  background-position: right 10px bottom 10px, 10px center,
+    left 510px top 13px, center;
+  background-size: auto;
+  background-repeat: no-repeat;
+  width: 1920px;
+  height: 1080px;
 }

src/views/page3/index.vue

@@ -1,23 +1,72 @@
 <template>
-  <bgBox :tabChange="tabChange">
-    <div class="myBox">内容</div>
+  <bgBox :tabChange="tabChange" class="bgBox" bgType="g-bg3">
+    <div class="main">
+      <div class="topBar">
+        <div class="query">
+          <img src="@/assets/img2/种植分析详情/编组 8.png" alt="" />
+          <el-radio-group v-model="query.radio" class="radio-group">
+            <el-radio class="date" :label="1">近一周</el-radio>
+            <el-radio class="date" :label="2">近30天</el-radio>
+            <el-radio class="date" :label="3">近90天</el-radio>
+          </el-radio-group>
+          <el-date-picker
+            v-model="query.date[0]"
+            type="date"
+            placeholder="开始日期"
+            class="mr-20px ml-20px date"
+          >
+          </el-date-picker>
+          <el-date-picker
+            class="date"
+            v-model="query.date[1]"
+            type="date"
+            placeholder="结束日期"
+          >
+          </el-date-picker>
+        </div>
+        <img
+          @click="backFn"
+          src="@/assets/img2/种植分析详情/编组 16备份.png"
+          alt=""
+        />
+      </div>
+      <leftBox class="lefBox" />
+    </div>
   </bgBox>
 </template>
 
 <script>
+import 'element-ui/lib/theme-chalk/index.css'
+
 import bgBox from '@/components/bgBox/index.vue'
+import leftBox from './leftBox.vue'
+import { Button, DatePicker, RadioGroup, Radio } from 'element-ui'
+import Vue from 'vue'
+Vue.use(Button)
+Vue.use(RadioGroup)
+Vue.use(Radio)
+Vue.use(DatePicker)
 
 export default {
   components: {
+    leftBox,
     bgBox,
   },
   data() {
-    return {}
+    return {
+      query: {
+        radio: 1,
+        date: [],
+      },
+    }
   },
   computed: {},
   async created() {},
   mounted() {},
   methods: {
+    backFn() {
+      console.log(`backFn`)
+    },
     tabChange(val) {
       console.log(`val`, val)
     },
@@ -26,8 +75,83 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.myBox {
-  background: #f00;
-  cursor: pointer;
+.bgBox {
+  .main {
+    padding: 50px;
+    padding-top: 45px;
+    .topBar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .lefBox {
+      position: absolute;
+      z-index: 10;
+      left: 47px;
+      top: 120px;
+    }
+    .query {
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      .radio-group {
+        margin-top: -1px;
+        margin-left: 20px;
+      }
+      .date {
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 10px;
+      }
+      ::v-deep {
+        .el-radio__input.is-checked + .el-radio__label {
+          color: rgba(255, 255, 255, 0.8);
+        }
+        .el-input__suffix {
+          right: 0;
+        }
+        .el-radio {
+          background: rgba(255, 255, 255, 0.2);
+          box-sizing: border-box;
+          height: 27px;
+          padding: 0 10px;
+          line-height: 27px;
+          color: rgba(255, 255, 255, 0.8);
+          margin-right: 5px;
+        }
+        .el-input--prefix .el-input__inner {
+          padding: 0;
+        }
+        .el-input__prefix {
+          display: none;
+        }
+        .el-date-editor.el-input {
+          width: 120px;
+        }
+        .el-input__icon {
+          line-height: 27px;
+          height: 27px;
+        }
+        .el-input__inner {
+          border-radius: 10px;
+          width: 120px;
+          height: 27px;
+          box-sizing: border-box;
+          line-height: 27px;
+          color: rgba(255, 255, 255, 0.8);
+          text-align: center;
+          border-width: 0;
+        }
+        .el-input__inner,
+        .el-radio__inner {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+  ::v-deep {
+    .top {
+      display: none;
+    }
+  }
 }
 </style>

src/views/page3/item.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="list">
+    <div class="containerBox" v-for="(item, index) in list" :key="index">
+      <div class="left">
+        <p class="title">{{ item.名称 }}</p>
+        <p>种植数量：{{ item.已种植 }}</p>
+        <p>目标完成率：{{ item.完成率 }}%</p>
+        <p>地址：{{ item.地址 }}</p>
+      </div>
+      <div class="right">
+        <img :src="item.图片[0]" alt="风景图" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: `LayoutExample`,
+  data() {
+    return {}
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  async created() {},
+}
+</script>
+
+<style scoped lang="less">
+.list {
+  padding: 16px;
+  width: 357px;
+  height: 750px;
+  overflow: auto;
+  .containerBox {
+    cursor: pointer;
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #fff;
+    background: rgba(168, 168, 168, 0.15);
+    backdrop-filter: blur(8px);
+    padding: 10px;
+    .left {
+      .title {
+        font-size: 20px;
+        line-height: 1.2em;
+        color: #fff;
+      }
+      p {
+        padding: 0;
+        margin: 0;
+        color: #bec1cc;
+        line-height: 1.5em;
+        font-size: 14px;
+        margin-bottom: 5px;
+      }
+    }
+    .right {
+      padding-left: 10px;
+      img {
+        width: 105px;
+        height: 105px;
+        border-radius: 10px;
+      }
+    }
+  }
+}
+</style>

src/views/page3/leftBox.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <boxTop />
+    <div class="leftBox">
+      <div class="search-bar">
+        <input
+          v-model="leftBox.input"
+          type="text"
+          placeholder="输入关键字进行搜索"
+          @keyup.enter="searchFn"
+        />
+        <div class="icons">
+          <span class="icon i-mdi-search" @click="searchFn"></span>
+          <span class="icon i-mdi-delete" @click="clearFn"></span>
+          <span class="icon i-mdi-swap-horizontal" @click="sortFn"></span>
+        </div>
+      </div>
+      <item :list="leftBox.list" />
+    </div>
+  </div>
+</template>
+
+<script>
+import item from './item.vue'
+import boxTop from '@/components/boxTop/index.vue'
+
+export default {
+  data() {
+    return {
+      leftBox: {
+        input: ``,
+        list: [],
+        sortIndex: 0,
+        sortList: [`已种植`, `完成率`],
+      },
+    }
+  },
+  components: {
+    boxTop,
+    item,
+  },
+  async created() {
+    this.searchFn()
+  },
+  methods: {
+    async searchFn() {
+      console.log(`search`, this.leftBox.input)
+      const data = await this.$http.get(`/base`, {
+        params: {
+          _sort:
+            this.leftBox.sortList[
+              this.leftBox.sortIndex % this.leftBox.sortList.length
+            ] || undefined,
+          名称_like: this.leftBox.input || undefined,
+        },
+      })
+      this.leftBox.list = data
+    },
+    clearFn() {
+      this.leftBox.input = ``
+      this.searchFn()
+      console.log(`clearFn`)
+    },
+    sortFn() {
+      this.leftBox.sortIndex++
+      this.searchFn()
+      console.log(`sortFn`)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.leftBox {
+  height: 845px;
+  background: rgba(48, 42, 42, 0.3);
+  backdrop-filter: blur(8px);
+  .search-bar {
+    display: flex;
+    align-items: center;
+    background-color: #2c2f3f;
+    height: 48px;
+    padding: 10px;
+    border-radius: 4px;
+    background: rgba(37, 34, 59, 0.31);
+    border: 0.5px solid;
+    box-sizing: border-box;
+    border-image: linear-gradient(
+        180deg,
+        #8a8989,
+        #bec1cc 27%,
+        rgba(255, 255, 255, 0.72) 59%,
+        #bec1cc 82%,
+        rgba(255, 255, 255, 0.76) 99%
+      )
+      0.5 0.5;
+
+    input {
+      flex: 1;
+      padding: 10px;
+      border: none;
+      background-color: transparent;
+      color: #fff;
+      font-size: 14px;
+      height: 35px;
+      line-height: 35px;
+      outline: none;
+    }
+
+    .icons {
+      display: flex;
+      align-items: center;
+      margin-left: 10px;
+
+      span {
+        margin-right: 10px;
+        color: #fff;
+        font-size: 18px;
+      }
+      .icon {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

yarn.lock

@@ -2971,6 +2971,13 @@ async-foreach@^0.1.3:
   resolved "https://registry.npmmirror.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
   integrity sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA==
 
+async-validator@~1.8.1:
+  version "1.8.5"
+  resolved "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==
+  dependencies:
+    babel-runtime "6.x"
+
 async@^2.6.4:
   version "2.6.4"
   resolved "https://registry.npmmirror.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
@@ -3050,6 +3057,11 @@ babel-eslint@^10.1.0:
     eslint-visitor-keys "^1.0.0"
     resolve "^1.12.0"
 
+babel-helper-vue-jsx-merge-props@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
+  integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==
+
 babel-loader@^8.2.2:
   version "8.4.1"
   resolved "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.4.1.tgz#6ccb75c66e62c3b144e1c5f2eaec5b8f6c08c675"
@@ -3091,6 +3103,14 @@ babel-plugin-polyfill-regenerator@^0.6.1:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.6.3"
 
+babel-runtime@6.x:
+  version "6.26.0"
+  resolved "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -3477,11 +3497,6 @@ camelcase-keys@^2.0.0:
     camelcase "^2.0.0"
     map-obj "^1.0.0"
 
-camelcase@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.npmmirror.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
-  integrity sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==
-
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
@@ -3993,6 +4008,11 @@ core-js-pure@^3.30.2:
   resolved "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.39.0.tgz#aa0d54d70a15bdc13e7c853db87c10abc30d68f3"
   integrity sha512-7fEcWwKI4rJinnK+wLTezeg2smbFFdSBP6E2kQZNbnzM2s1rpKQ6aaRteZSSg7FLU3P0HGGVo/gbpfanU36urg==
 
+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-js@^3.21.1, core-js@^3.6.4, core-js@^3.8.3:
   version "3.39.0"
   resolved "https://registry.npmmirror.com/core-js/-/core-js-3.39.0.tgz#57f7647f4d2d030c32a72ea23a0555b2eaa30f83"
@@ -4366,7 +4386,7 @@ deep-is@~0.1.3:
   resolved "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^1.5.2:
+deepmerge@^1.2.0, deepmerge@^1.5.2:
   version "1.5.2"
   resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
@@ -4628,6 +4648,18 @@ electron-to-chromium@^1.5.41:
   resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz#69444d592fbbe628d129866c2355691ea93eda3e"
   integrity sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==
 
+element-ui@^2.15.14:
+  version "2.15.14"
+  resolved "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz#3c34df79467636592812d720d2e6784e7a6ec2ea"
+  integrity sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==
+  dependencies:
+    async-validator "~1.8.1"
+    babel-helper-vue-jsx-merge-props "^2.0.0"
+    deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
+    throttle-debounce "^1.0.1"
+
 elliptic@^6.5.3, elliptic@^6.5.5:
   version "6.6.1"
   resolved "https://registry.npmmirror.com/elliptic/-/elliptic-6.6.1.tgz#3b8ffb02670bf69e382c7f65bf524c97c5405c06"
@@ -7799,6 +7831,11 @@ normalize-url@^6.0.1:
   resolved "https://registry.npmmirror.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -9059,6 +9096,11 @@ regenerate@^1.4.2:
   resolved "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
 regenerator-runtime@^0.13.3:
   version "0.13.11"
   resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
@@ -9212,6 +9254,11 @@ requires-port@^1.0.0:
   resolved "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -10269,6 +10316,11 @@ thread-loader@^3.0.0:
     neo-async "^2.6.2"
     schema-utils "^3.0.0"
 
+throttle-debounce@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.npmmirror.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -10684,13 +10736,6 @@ update-browserslist-db@^1.1.1:
     escalade "^3.2.0"
     picocolors "^1.1.0"
 
-uppercamelcase@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmmirror.com/uppercamelcase/-/uppercamelcase-1.1.0.tgz#324d98a6b3afc7e8a8953e10641509b0e4e23f97"
-  integrity sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA==
-  dependencies:
-    camelcase "^1.2.1"
-
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -10802,13 +10847,6 @@ vm2@^3.9.12:
     acorn "^8.7.0"
     acorn-walk "^8.2.0"
 
-vue-amap@^0.5.10:
-  version "0.5.10"
-  resolved "https://registry.npmmirror.com/vue-amap/-/vue-amap-0.5.10.tgz#464516203af0c085d404bd8acabf2401e4a36ff6"
-  integrity sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==
-  dependencies:
-    uppercamelcase "^1.1.0"
-
 vue-count-to@^1.0.13:
   version "1.0.13"
   resolved "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz#3e7573ea6e64c2b2972f64e0a2ab2e23c7590ff3"