|
@@ -0,0 +1,227 @@
|
|
|
+<template>
|
|
|
+ <div class="adopt-list">
|
|
|
+ <div class="select-wrap">
|
|
|
+ <el-select class="select-item" v-model="areaVal" placeholder="全区" style="width: 116px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in areaOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select class="select-item" v-model="typeVal" placeholder="全部品类" style="width: 116px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in typeOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select class="select-item" v-model="ageVal" placeholder="树龄" style="width: 116px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in ageOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="select-wrap select-b">
|
|
|
+ <el-select class="select-item" v-model="allVal" placeholder="综合评分" style="width: 116px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in allOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select class="select-item" v-model="ecologyVal" placeholder="生态评分" style="width: 116px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in ecologyOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select class="select-item" v-model="statusVal" placeholder="全部状态" style="width: 116px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in statusOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list-wrap">
|
|
|
+ <div class="list-item" v-for="(item, index) in 10" :key="index">
|
|
|
+ <div class="tree-icon">
|
|
|
+ <div class="tree-tag">未定价</div>
|
|
|
+ <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="">
|
|
|
+ <div class="tree-type-name-tag">白糖罂</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-center">
|
|
|
+ <div class="center-t">
|
|
|
+ BTY-A25
|
|
|
+ <span class="type-tag">综合:94分</span>
|
|
|
+ <span class="type-tag">生态:92分</span>
|
|
|
+ <span class="type-tag">树龄:5年</span>
|
|
|
+ </div>
|
|
|
+ <div class="center-item">
|
|
|
+ 单价:<span>--元/斤</span>
|
|
|
+ </div>
|
|
|
+ <div class="center-item">
|
|
|
+ 总认养斤数:<span>215斤</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/common/edit-icon.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import {onMounted, ref} from 'vue'
|
|
|
+
|
|
|
+const areaVal = ref(0)
|
|
|
+const areaOptions = ref([
|
|
|
+ {label: "全区", value: 0},
|
|
|
+ {label: "1区", value: 1},
|
|
|
+ {label: "2区", value: 2},
|
|
|
+])
|
|
|
+const typeVal = ref(0)
|
|
|
+const typeOptions = ref([
|
|
|
+ {label: "全部品类", value: 0},
|
|
|
+ {label: "白糖罂", value: 1},
|
|
|
+ {label: "井岗红糯", value: 2},
|
|
|
+])
|
|
|
+const ageVal = ref(0)
|
|
|
+const ageOptions = ref([
|
|
|
+ {label: "全部树龄", value: 0},
|
|
|
+ {label: "0-10年", value: 1},
|
|
|
+ {label: "10-20年", value: 2},
|
|
|
+])
|
|
|
+const allVal = ref(0)
|
|
|
+const allOptions = ref([
|
|
|
+ {label: "全部评分", value: 0},
|
|
|
+ {label: "0-10年", value: 1},
|
|
|
+ {label: "10-20年", value: 2},
|
|
|
+])
|
|
|
+const ecologyVal = ref(0)
|
|
|
+const ecologyOptions = ref([
|
|
|
+ {label: "生态评分", value: 0},
|
|
|
+ {label: "0-10年", value: 1},
|
|
|
+ {label: "10-20年", value: 2},
|
|
|
+])
|
|
|
+const statusVal = ref(0)
|
|
|
+const statusOptions = ref([
|
|
|
+ {label: "全部状态", value: 0},
|
|
|
+ {label: "0-10年", value: 1},
|
|
|
+ {label: "10-20年", value: 2},
|
|
|
+])
|
|
|
+onMounted(()=>{
|
|
|
+})
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.adopt-list {
|
|
|
+ .type-tag {
|
|
|
+ color: #FFD489;
|
|
|
+ background: rgba(255, 212, 137, 0.06);
|
|
|
+ padding: 2px 4px;
|
|
|
+ font-size: 10px;
|
|
|
+ margin-left: 4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .select-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ ::v-deep {
|
|
|
+ .el-select__wrapper {
|
|
|
+ background: rgba(255, 212, 137, 0.06);
|
|
|
+ box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
|
|
|
+ font-size: 13px;
|
|
|
+ .el-select__input {
|
|
|
+ color: #FFD489;
|
|
|
+ }
|
|
|
+ .el-select__placeholder {
|
|
|
+ color: #FFD489;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .el-select__suffix {
|
|
|
+ color: #FFD489;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-item + .select-item {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-b {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ .list-wrap {
|
|
|
+ padding: 12px 0;
|
|
|
+ .list-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: rgba(255, 255, 255, 0.08);
|
|
|
+ padding: 8px 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ .tree-icon {
|
|
|
+ position: relative;
|
|
|
+ .tree-tag {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background: #0ACCBF;
|
|
|
+ border-radius: 5px 0 5px 0;
|
|
|
+ color: #fff;
|
|
|
+ padding: 1px 6px;
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+ .tree-type-name-tag {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ border-radius: 0 5px 5px 0;
|
|
|
+ font-size: 10px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ padding: 1px;
|
|
|
+ backdrop-filter: blur(2px);
|
|
|
+ }
|
|
|
+ .tree-img {
|
|
|
+ width: 63px;
|
|
|
+ height: 63px;
|
|
|
+ border-radius: 5px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-center {
|
|
|
+ flex: 1;
|
|
|
+ padding: 0 12px;
|
|
|
+ color: #fff;
|
|
|
+ .center-t {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .center-item {
|
|
|
+ color: #6C6C6C;
|
|
|
+ font-size: 12px;
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item + .list-item {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|