修改下拉样式

nuxt.config.js

@@ -20,14 +20,17 @@ module.exports = {
     },
     css: [
       '~/assets/main.css',
-      'swiper/dist/css/swiper.min.css'
+      'swiper/dist/css/swiper.min.css',
+      'element-ui/lib/theme-chalk/index.css'
     ],
 
     loading: '~/components/loading.vue',
 
     plugins: [
       { src: '~plugins/muse-ui.js', ssr: true },
-      { src: '~plugins/filters.js', srr: false }
+      { src: '~plugins/filters.js', srr: false },
+      { src: '~/plugins/elementUI.js', srr: false },
+    
     ],
     build: {
         extend(config, { isDev, isClient }) {
@@ -39,8 +42,9 @@ module.exports = {
                     exclude: /(node_modules)/
                 })
             }
-        }
+        },
         //,publicPath: '/rvwebsite/'
+        vendor: ['element-ui']
     },
     render: {
         bundleRenderer: {

package.json

@@ -23,16 +23,20 @@
     "body-parser": "^1.18.2",
     "bulma": "^0.5.1",
     "cookie-parser": "^1.4.3",
+    "element-ui": "^2.12.0",
     "express": "^4.16.3",
+    "layui-src": "^2.5.4",
     "multer": "^1.3.0",
     "muse-ui": "^2.1.0",
+    "nuxt": "^1.0.0",
     "swiper": "^4.0.7",
     "vue-infinite-loading": "^2.4.4",
-    "vue-infinite-scroll": "^2.0.2",
-    "nuxt": "^1.0.0"
+    "vue-infinite-scroll": "^2.0.2"
   },
   "devDependencies": {
+    "across-env": "^2.0.1",
     "babel-eslint": "^8.2.1",
+    "cross-env": "^5.2.1",
     "eslint": "^4.15.0",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.7.1",

pages/campsite.vue

@@ -23,14 +23,27 @@
         </div>
         <div class="clearfix total-div" style="background-color: #fff;padding:13px 0 19px 14px;color:#666;height:50px">
           共{{totalCount}}个房车营地
-          <select
+          <el-select
+             style="width:150px;height:30px;float:right;margin:-8px 10px 10px 0"
+             value-key="id"
+              v-model="typeList"
+              placeholder="营地类型"
+              @change="chooseSelect()">
+              <el-option
+                v-for="item in dataType"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          <!-- <select
             @change="chooseSelect($event)"
             style="width:145px;text-align:center;height:30px;float:right;border:none;outline: none;color:#666;padding-left:30px"
           >
             <option value>营地类型</option>
             <option v-for="item in dataType" :value="item.id" :key="item.id">{{ item.name }}</option>
             <option value>全部</option>
-          </select>
+          </select> -->
         </div>
         <h3 v-if="dataNull" style="margin:20px 0;background-color: #fff;padding:20px">暂无信息</h3>
         <ul class="campsiteDetail clearfix" v-if="!dataNull">
@@ -62,6 +75,7 @@ export default {
   },
   data() {
     return {
+      typeList:"营地类型",
       showBanner: !0,
       looptime: 4000, // 循环时间
       typeId: "营地类型",
@@ -91,9 +105,9 @@ export default {
   },
   methods: {
 
-    chooseSelect(e) {
-      console.log(e.target.value);
-      this.listQuery.type = e.target.value;
+    chooseSelect() {
+      console.log(this.typeList);
+          this.listQuery.type = this.typeList
            this.getAll();
     },
     goDetails() {
@@ -105,6 +119,7 @@ export default {
         data: { data }
       } = await axios.get("/api/campsite/campsiteTag/app/unauth/tags");
       // console.log(data);
+      data.push({id:"",name:'全部'})
       this.dataType = data;
     },
     async getAll() {

pages/tour.vue

@@ -26,14 +26,28 @@
         <div class="clearfix total-div" style="background-color: #fff;padding:13px 0 19px 14px;color:#666;height:50px">
           共{{totalCount}}个旅行路线
           <!-- <div class="selectDiv"> -->
-          <select
-            @change="chooseSelect($event)"
+             <el-select
+             style="width:150px;height:30px;float:right;margin:-8px 10px 10px 0"
+             value-key="id"
+              v-model="typeList"
+              placeholder="旅行类型"
+              @change="chooseSelect()">
+              <el-option
+
+                v-for="item in dataType"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          <!-- <select
+            @change="choose($event)"
             style="width:145px;text-align:center;height:30px;float:right;border:none;outline: none;color:#666;padding-left:30px"
           >
             <option value>旅行类型</option>
             <option v-for="item in dataType" :value="item.id" :key="item.id" style="outline: none;">{{ item.name }}</option>
             <option value>全部</option>
-          </select>
+          </select> -->
           <!-- </div> -->
         </div>
         <h3 v-if="dataNull" style="margin:20px 0;background-color: #fff;padding:20px">暂无信息</h3>
@@ -76,6 +90,7 @@
   },
     data(){
       return{
+        typeList:"旅行类型",
         showBanner: !0,
        looptime: 4000, // 循环时间
       typeId: "营地类型",
@@ -97,7 +112,12 @@
     };
     },
     methods:{
-      chooseSelect(e) {
+      chooseSelect() {
+      console.log(this.typeList);
+          this.listQuery.tagId = this.typeList
+           this.getAll();
+    },
+    choose(e) {
       console.log(e.target.value);
       this.listQuery.tagId = e.target.value;
       this.getAll();
@@ -106,7 +126,10 @@
       const {
         data: { data }
       } = await axios.get("/api/uccn/app/unauth/tour/tagList" );
+      data.push({id:"",name:'全部'})
       this.dataType = data;
+      console.log(data);
+      this.loading = false
     },
      async getAll() {
       let {

plugins/elementUI.js

+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+Vue.use(ElementUI)
\ No newline at end of file