vue vue-router vuex element-ui axios的学习笔记（十五）商品页面写一下样式

product.vue

<template>
<div class="container">
  <el-row>
    <el-col class="menu-box" :span="6">
      <p></p>
      <el-menu
        class="menu"
        :default-active="$route.path"
        router
        background-color="#fff"
        text-color="#267943"
        active-text-color="#000">
        <el-menu-item v-for="(item, index) in productclass" 
          :index="'/product/'+item.class"
          :key="'/product/'+item.class"
          v-text="item.name">
        </el-menu-item>
      </el-menu>
    </el-col>
    <!-- 右边主要内容 -->
    <el-col :span="18">
      <!-- 搜索框 -->
      <el-input 
      type="text"
      class="el-input"
      placeholder="请输入商品名"
      v-model="searchName">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button 
        type="primary"
        :disabled="disabled"
        @click="search"
        :loading="loading">
        搜索
      </el-button>
      <!-- 商品列表渲染的地方 -->
      <transition name="el-zoom-in-center">
        <router-view :key="key"></router-view>
      </transition>
    </el-col>
  </el-row>
</div>

</template>
<script>
import {SearchProductList} from '../../api/api'
export default {
  data () {
    return {
      searchName: '',
      isactive: false,
      loading: false,
      productclass: [
        {
          class: 'all',
          name: '全部商品'
        },
        {
          class: 'pomegranate',
          name: '石榴'
        },
        {
          class: 'pine',
          name: '松子'
        },
        {
          class: 'ham',
          name: '火腿'
        },
        {
          class: 'other',
          name: '其它商品'
        }
      ]
    }
  },
  computed: {
    key () {
      return this.$route.params.class + new Date()
    },
    disabled () {
      if (this.searchName === '') {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    search () {
      this.loading = true
      let searchparams = this.searchName
      SearchProductList(searchparams).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          this.$router.push({
            path: '/product/search',
            query: {name: this.searchName}
          })
        } else {
          this.$notify({
            title: '很抱歉',
            message: res.data.msg,
            type: 'warning',
            offset: 200
          })
          this.$router.push('/product/all')
        }
      })
    }
  }
}
</script>
<style scoped>
.el-input {
  margin: 20px 0;
  width: 70%;
}
.el-button {
  width: 25%;
  margin-right: 5px; 
}
.menu {
  position: fixed;
  width: 200px;
  top: 150px;
  left: 50px;
  box-shadow: 0 0 6px #ccc;
}
.is-active {
  background: #669966 !important;
  /* border-bottom: 3px solid #66CC00 !important; */
  color: #fff !important;
  font-weight: bold !important;
}
@media screen and (max-width: 767px) {
  .menu {
    position: fixed;
    width: 25%;
    top: 100px;
    left: 5px;
    box-shadow: 0 0 6px #ccc;
  }
  .is-active {
    background: #669966 !important;
    /* border-bottom: 3px solid #66CC00 !important; */
    color: #fff !important;
    font-weight: bold !important;
  }
}
</style>

productlist.vue

<template>
  <div>
    <div class="title">
      <h1 v-text="$route.params.class"></h1>
    </div>
    <!-- <p>共{{productlist.length}}个商品</p> -->
    <ul>
      <template v-for="(item, index) in productlist">
        <el-row  class="item" :key="item.productclass">
          <router-link 
            :to="'/product/'+item.productclass+'/'+item.productname"
            :key="item.productclass">
            <el-col :span="8">
              <img :src="item.productimage" >
            </el-col>
          </router-link>  
          <el-col :span="16">
            <h3>{{item.productname}}</h3>
            <p class="intro">{{item.productintro}}</p>
            <router-link 
              :to="'/product/'+item.productclass+'/'+item.productname"
              :key="item.productclass">
              <p class="link">了解详情...</p>
            </router-link>
            <p class="sellnum">累计发货<span>{{item.productsells}}</span>件</p>
            <p class="price">全国包邮价<span>{{item.productprice}}</span>元</p>
            <!-- <el-input-number size="mini" v-model="addnum"></el-input-number> -->
          </el-col>
        </el-row>
      </template>
    </ul>
  </div>
</template>
<script>
import {GetProductList, SearchProductList} from '../../../api/api'
export default {
  data () {
    return {
      productlist: [],
      addnum: 0
    }
  },
  // methods: {
  //   formatClass () {
  //     if (this.$route.params.class === 'all' || 'ham' || 'ham' || 'ham') {

  //     }
  //   }
  // },
  mounted () {
    if (this.$route.query.name) {
      // 获取查询列表
      // console.log(this.$route.query.name)
      let searchparams = this.$route.query.name
      SearchProductList(searchparams).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.productlist = res.data.searchRes
        } else {
          this.$notify({
            title: '很抱歉',
            message: res.data.msg,
            type: 'warning',
            offset: 200
          })
          this.$router.push('/product/all')
        }
      })
    } else {
      // 获取分类列表
      let params = null
      if (this.$route.params.class === 'all') {
        params = ''
      } else {
        params = this.$route.params.class
      }
      GetProductList(params).then(res => {
        // console.log(res)
        this.productlist = res.data.productlist
      })
    }
  }
}
</script>
<style scoped>
a {
  text-decoration: none;
  color: #999;
}
a:hover {
  color: #669966;
}
.title {
  height: 60px;
  border-left: 4px solid #669966; 
  margin: 0 15px;
  background-color: #f2f3f2;
  text-align: left;
  padding-left:20px; 
  line-height: 60px;
}
ul {
  padding: 0;
  margin: 0 15px;
}
.item {
  margin: 25px 0;
  /* background: #f2f3f2; */
  box-shadow: 0 0 30px #ccc;
  border-radius: 15px; 
}
.item:hover {
  /* border: 1px solid silver;  */
  background: #eee;
}
img {
  width: 100%;
  max-width: 500px;
  padding: 10px;
  border-radius: 15px; 
}
.intro,.price,.sellnum {
  margin: 0 15px 0 25px;
  text-align: left;
  color: #666;
  line-height: 2;
  letter-spacing: 1.2;
}
.link {
  text-align: right;
  font-size: 16px;
  margin-right: 40px; 
}
.price,.sellnum {
  color: gray;
}
.price span {
  color: red;
  font-size: 25px;
}
</style>

productcontent.vue

<template>
  <div>
    <h1>productcontent.vue</h1>
    <p>{{$route.params.class}}</p>
    <p>{{$route.params.productname}}</p>
    <div>
      <h2 v-text="product.productname"></h2>
      <p>价格：{{product.productprice}}元</p>
      <p>销量：{{product.productsells}}</p>
      <img :src="product.productimage">
      <p>{{product.productintro}}</p>
    </div>
  </div>
</template>
<script>
import {GetProduct} from '../../../api/api'
export default {
  data () {
    return {
      product: {}
    }
  },
  mounted () {
    let params = {
      productname: this.$route.params.productname,
      productclass: this.$route.params.class
    }
    GetProduct(params).then(res => {
      // console.log(res)
      this.product = res.data.curproduct
    })
  }
}
</script>

效果

总结

样式的写法那就多种多样了，这个就是随便写一下，如果是这要写商品页面的话可以参考很多商城的样式，也可以加很多效果，我这个写得更像文章页面

element-ui 修改样式

比如修改element-ui的导航菜单active样式，先查看元素，在菜单被选中的时候会多一个is-active的class，所以只要修改这个is-active就可以了，但要注意写在scope里面需要在后面加一个！important

虽然是菜鸟初学者，但还是自恋的留一个github地址吧
github: https://github.com/lyttonlee/...