From c5de910ae8d6691c90130f43a817cab9f2427f1c Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期二, 06 四月 2021 12:38:25 +0800 Subject: [PATCH] 右侧固废查询面板及整体样式修改 --- src/components/panel/topicSearch/SolidWasteSearch.vue | 129 ++++++++---------------------------------- 1 files changed, 26 insertions(+), 103 deletions(-) diff --git a/src/components/panel/topicSearch/SolidWasteSearch.vue b/src/components/panel/topicSearch/SolidWasteSearch.vue index b283cb1..9145c0b 100644 --- a/src/components/panel/topicSearch/SolidWasteSearch.vue +++ b/src/components/panel/topicSearch/SolidWasteSearch.vue @@ -1,5 +1,5 @@ <template> - <div class="solidwaste-search" v-if="judgeVisible"> + <div class="query-search" v-if="judgeVisible"> <div class="search-title"> <span>鍥哄簾</span> <!-- <span>{{ title }}</span>--> @@ -18,24 +18,17 @@ </el-option> </el-select> </el-form-item> - <!-- <div class="search-radio"> - <el-radio v-model="radio" label="1">鍏ㄩ儴</el-radio> - <el-radio v-model="radio" label="2">姝e父</el-radio> - <el-radio v-model="radio" label="3">棰勮</el-radio> - </div> --> - <el-radio-group v-model="form.type" class="levelOfRisk"> - <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}</span></el-radio> + <el-radio-group v-model="radio" class="levelOfRisk"> + <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"> + <span class="levelOfRisk-type">{{ item.name }}</span> + </el-radio> </el-radio-group> - <div class="rightButtonSearch"> - <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input> - <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom> + <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input> + <el-button class="el-icon-search" @click="handleSearch"></el-button> </div> - <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"> - <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> - </el-input> </el-form> - <el-scrollbar style="height:500px"> + <el-scrollbar style="height:300px"> <div class="environmental-risk-list"> <i class="state"></i> <div> @@ -44,57 +37,16 @@ <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> </div> </div> - <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" --> + <div class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :key="index"> <i class="state"></i> <div> - <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> - </div> - </div> - <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" --> - <i class="state"></i> - <div> - <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> - </div> - </div> - <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" --> - <i class="state"></i> - <div> - <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> - </div> - </div> - <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" --> - <i class="state"></i> - <div> - <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> - </div> - </div> - <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" --> - <i class="state"></i> - <div> - <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> + <h3>{{ item.StoragePlaceTypeName }}</h3> + <p>鎵�灞為儴闂細<span>{{ item.CompanyName }}</span></p> + <p>椋庨櫓绾у埆锛�<span>{{ item.StoragePlaceTypeName }}</span></p> </div> </div> </el-scrollbar> - <!-- <el-card class="box-card"--> - <!-- v-for="(item,index) in searchDataDisplay"--> - <!-- :key="index">--> - <!-- <div>--> - <!-- {{ item.CompanyName }}--> - <!-- </div>--> - <!-- </el-card>--> </div> - <!-- <el-scrollbar style="height:100%">--> - <!-- </el-scrollbar>--> </div> </template> @@ -108,9 +60,18 @@ data () { return { levelOfRisk: [ - { name: '鍏ㄩ儴', value: '1' }, - { name: '姝e父', value: '2' }, - { name: '棰勮', value: '3' } + { + name: '鍏ㄩ儴', + value: '1' + }, + { + name: '姝e父', + value: '2' + }, + { + name: '棰勮', + value: '3' + } ], judgeVisible: true, solidWasteTypeOptions: [{ @@ -184,18 +145,14 @@ // 鏁版嵁鐨勪紶閫� transferData: '' }, + // 鏁版嵁鎼滅储涔嬪悗锛屽瓨鍌ㄦ暟鎹殑 searchDataDisplay: [] } }, methods: { handlePipelineType (val) { - // console.log(val) this.solidWasteTypeOptions.forEach(item => { - // console.log(item.value) if (val === item.value) { - // console.log('鏁版嵁閫夋嫨鐩稿悓') - // 鎺ユ敹鏁版嵁 鐢ㄤ簬涔嬪悗鎺ュ彛鏁版嵁鐨勮皟鐢� - // this.form.transferData = item.value this.handleSearch(item.value) } }) @@ -212,42 +169,8 @@ </script> <style lang="less" scoped> -.el-radio.is-checked .levelOfRisk-type { - color: #409EFF -} -.levelOfRisk { - padding-left: 20px -} - -.levelOfRisk .el-radio { - padding-bottom: 6px -} - -.environmental-risk-list { - border: 1px solid @color; - margin-right: 10px; - margin-bottom: 15px; - position: relative; - padding-left: 50px; - padding-top: 3px; - padding-bottom: 3px; - color: #f5f5f5; - - .state { - width: 30px; - height: 30px; - position: absolute; - top: 50%; - left: 10px; - margin-top: -15px; - border-radius: 50%; - box-shadow: 0 0 3px #000; - background: #0B3B6D; - } -} - -.el-input { +.el-scrollbar { margin: 15px auto; } -- Gitblit v1.8.0