|
@@ -0,0 +1,108 @@
|
|
|
+<template>
|
|
|
+ <div class="all_industry">
|
|
|
+ <tit :tname="name"/>
|
|
|
+ <!-- 选择大区 -->
|
|
|
+ <ul class="industry_sel">
|
|
|
+ <li
|
|
|
+ v-for="(item,index) in industry"
|
|
|
+ :key="index"
|
|
|
+ @click="chooseOne(index)"
|
|
|
+ :class="{active:index==current}"
|
|
|
+ >{{ item.text }}</li>
|
|
|
+ </ul>
|
|
|
+ <!-- end:选择大区 -->
|
|
|
+
|
|
|
+ <button>确定</button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import tit from '~/components/titles.vue'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ name:'选择行业',
|
|
|
+ industry: [
|
|
|
+ { text: '全部' },
|
|
|
+ { text: '电力' },
|
|
|
+ { text: '石油石化天然气' },
|
|
|
+ { text: '市政交通运输' },
|
|
|
+ { text: '五金建材机械' },
|
|
|
+ { text: '农林水利环保' },
|
|
|
+ { text: '冶金矿产重工' },
|
|
|
+ { text: '医药化工' },
|
|
|
+ { text: '电子电器通信' },
|
|
|
+ { text: '轻工食品日用品' },
|
|
|
+ { text: '办公展览停车场建筑' },
|
|
|
+ { text: '商业酒店住宅建筑' },
|
|
|
+ { text: '医疗文教娱乐建筑' },
|
|
|
+ { text: '工业仓储行政建筑' },
|
|
|
+ { text: '绿化生态旅游' },
|
|
|
+ { text: '其他' },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ chooseOne: function(index){
|
|
|
+ this.current=index;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ tit,
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+
|
|
|
+.all_industry button {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ position: fixed;
|
|
|
+ background-color: #ff5c5c;
|
|
|
+ text-align: center;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ border: 0;
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+.industry_sel {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ text-align: left;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 1.5rem;
|
|
|
+ padding-bottom: 50px;
|
|
|
+}
|
|
|
+.industry_sel li {
|
|
|
+ color: #202020;
|
|
|
+ line-height: 60px;
|
|
|
+ transition: 0.2s;
|
|
|
+ position: relative;
|
|
|
+ background-image: url('../../static/img/icon_select.png');
|
|
|
+ background-position: right center;
|
|
|
+ background-size: 20px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+.industry_sel li.active {
|
|
|
+ color: #ff5c5c;
|
|
|
+ background-image: url('../../static/img/icon_selected.png');
|
|
|
+ transition: 0.2s;
|
|
|
+}
|
|
|
+.industry_sel li::after{
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ height: 1px;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ margin-right: -1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|