| 
					
				 | 
			
			
				@@ -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> 
			 |