图文分享思路:
图片懒加载:
而图片需要消耗较大的流量。正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载<img src="xxx">
的图片标签。如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面,就没有看到这些图片,相当于白白浪费了图片的流量。
所以,淘宝、京东这些流量非常巨大的电商,商品介绍页又必须有大量的图片,因此,这些页面的图片都是“按需加载”,即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候,用户并不能感知懒加载的动作,既省流量又不影响用户浏览。
photoshare.vue
<template>
<div class="tmpl">
<nav-bar title="图文分享"></nav-bar>
<!-- 引入返回导航 -->
<div class="photo-header">
<ul>
<li v-for="category in categorys" :key="category.id">
<a href="javascript:;" @click="loadImg(category.id)">{{category.title}}</a>
</li>
</ul>
</div>
<div class="photo-list">
<ul>
<li v-for="img in imgs" :key="img.id">
<router-link :to="{name:'photo.detail',params:{id:img.id} }">
<!-- <img :src="img.img_url"> -->
<!-- 懒加载 -->
<img v-lazy="img.img_url">
<p>
<span v-text="img.title"></span>
<br>
<span v-text="img.zhaiyao"></span>
</p>
</router-link>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data(){
return {
categorys:[],//分类
imgs:[], //图片数据
}
},
created(){
//发起请求获取导航栏数据
this.$ajax.get('getimgcategory')
.then(res=>{
this.categorys = res.data.message;
//将全局添加到数组的第一个 unshift
this.categorys.unshift({
id:0,
title:'全部'
});
})
.catch(err=>{
console.log(err);
});
//当页面加载默认传递0
this.loadImg(0); //该代码替换了下面的请求的代码,做了函数封装
//将0作为参数,获取全部图片数据
// this.$ajax.get('getimages/' + 0)
// .then(res=>{
// this.imgs = res.data.message;
// })
// .catch(err=>{
// console.log(err);
// })
},
methods:{
loadImg(id){
this.$ajax.get('getimages/' + id)
.then(res=>{
this.imgs = res.data.message;
})
.catch(err=>{
console.log(err);
})
}
}
}
</script>
<style>
.photo-header li {
list-style: none;
display: inline-block;
margin-left: 10px;
height: 30px;
}
.photo-header ul {
/*强制不换行*/
white-space: nowrap;
overflow-x: auto;
padding-left: 0px;
margin: 5;
}
/*下面的图片*/
.photo-list li {
list-style: none;
position: relative;
}
.photo-list li img {
width: 100%;
height: 230px;
vertical-align: top;
}
.photo-list ul {
padding-left: 0px;
margin: 0;
}
.photo-list p {
position: absolute;
bottom: 0px;
color: white;
background-color: rgba(0, 0, 0, 0.3);
margin-bottom: 0px;
}
.photo-list p span:nth-child(1) {
font-weight: bold;
font-size: 16px;
}
/*图片懒加载的样式*/
image[lazy=loading] {
width: 40px;
height: 300px;
margin: auto;
}
</style>
<template>
<div class="tmpl">
<!-- 组件名navBar -->
<nav-bar title="图片详情"></nav-bar>
<!-- 组件名:navbar -->
<!-- 使用:navbar-->
<div class="photo-title">
<p v-text="imgInfo.title"></p>
<span>发起日期:{{imgInfo.add_time | convertDate}}</span>
<span>{{imgInfo.click}}次浏览</span>
<span>分类:民生经济</span>
</div>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li v-for="(img,index) in imgs" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<img :src="img.src">
</li>
</ul>
<div class="photo-desc">
<p v-html="imgInfo.content"></p>
</div>
</div>
</template>
<script>
export default {
data(){
return {
imgs:[],//存放缩率图
imgInfo:{},//详情数据对象
}
},
created(){
//1:获取路由参数
let pid = this.$route.params.id;
//2:发起请求2个
//图片详情
this.$ajax.get('getimageInfo/' + pid)
.then(res=>{
//一个id对应一个详情对象
this.imgInfo = res.data.message[0];
})
.catch(err=>{
console.log(err)
});
//缩略图
this.$ajax.get('getthumimages/' + pid)
.then(res=>{
this.imgs = res.data.message;
})
.catch(err=>{
console.log(err)
})
//3:放上数据
}
}
</script>
<style scoped>
li {
list-style: none;
}
ul {
margin: 0;
padding: 0;
}
.photo-title {
overflow: hidden;
}
.photo-title,
.photo-desc {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
margin-bottom: 5px;
padding-left: 5px;
}
.photo-title p {
color: #13c2f7;
font-size: 20px;
font-weight: bold;
}
.photo-title span {
margin-right: 20px;
}
.mui-table-view.mui-grid-view.mui-grid-9 {
background-color: white;
border: 0;
}
.mui-table-view.mui-grid-view.mui-grid-9 li {
border: 0;
}
.photo-desc p {
font-size: 18px;
}
.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
padding: 2 2;
}
</style>
缩略图:
使用vue-preview
//VuePreview:引入vue-preview
import VuePreview from 'vue-preview'
Vue.use(VuePreview);
在 webpack.config.js 加入
test: /vue-preview.src.*?js$/,
loader: 'babel-loader',
options: { 建议使用.babelrc文件,在当前根目录就可以了
presets: ['es2015'], //关键字
plugins: ['transform-runtime'], //函数
}
<template>
<div class="tmpl">
<!-- 组件名navBar -->
<nav-bar title="图片详情"></nav-bar>
<!-- 组件名:navbar -->
<!-- 使用:navbar-->
<div class="photo-title">
<p v-text="imgInfo.title"></p>
<span>发起日期:{{imgInfo.add_time | convertDate}}</span>
<span>{{imgInfo.click}}次浏览</span>
<span>分类:民生经济</span>
</div>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li v-for="(img,index) in imgs" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<!-- <img :src="img.src"> -->
<img class="preview-img" :src="img.src" height="100" @click="$preview.open(index, imgs)">
</li>
</ul>
<div class="photo-desc">
<p v-html="imgInfo.content"></p>
</div>
<!-- 评论内容开始 -->
<div class="photo-bottom">
<ul>
<li class="photo-comment">
<div>
<span>提交评论</span>
<span><a >返回</a></span>
</div>
</li>
<li class="txt-comment">
<textarea></textarea>
</li>
<li>
发表评论按钮
</li>
<li class="photo-comment">
<div>
<span>评论列表</span>
<span>44条评论</span>
</div>
</li>
</ul>
<ul class="comment-list">
<li v-for="(comment,index) in comments" :key="index">
{{comment.user_name}}:{{comment.content}} {{comment.add_time|convertDate}}
</li>
</ul>
<button @click="loadByPage">加载更多按钮</button>
</div>
<!-- 评论内容结束 -->
</div>
</template>
<script>
export default {
data(){
return {
imgs:[],//存放缩率图
imgInfo:{},//详情数据对象
comments:[],//存放评论数据
pageIndex:1,//页码
cid:this.$route.params.id, //记录当前图片id
}
},
created(){
//1:获取路由参数
// let pid = this.$route.params.id;
//2:发起请求2个
//图片详情
this.$ajax.get('getimageInfo/' + this.cid)
.then(res=>{
//一个id对应一个详情对象
this.imgInfo = res.data.message[0];
})
.catch(err=>{
console.log(err)
});
//缩略图
this.$ajax.get('getthumimages/' + this.cid)
.then(res=>{
this.imgs = res.data.message;
//forEach
this.imgs.forEach((ele)=>{
ele.w=300;
ele.h=200; //缩率图显示的高
})
})
.catch(err=>{
console.log(err)
})
//评论操作 开始
this.loadFirst();
//评论操作 结束
},
methods:{
//先调用这个函数
loadFirst(){
this.$ajax.get('getcomments/' + this.cid +'?pageindex=1')
.then(res=>{
this.comments = res.data.message;
})
.catch(err=>{
console.log(err);
})
},
//再点击按钮
loadByPage(){
this.$ajax.get('getcomments/' + this.cid +'?pageindex=' + (++this.pageIndex))
.then(res=>{
//追加
this.comments = this.comments.concat(res.data.message);
})
.catch(err=>{
console.log(err);
})
}
}
}
</script>
<style scoped>
li {
list-style: none;
}
ul {
margin: 0;
padding: 0;
}
.photo-title {
overflow: hidden;
}
.photo-title,
.photo-desc {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
margin-bottom: 5px;
padding-left: 5px;
}
.photo-title p {
color: #13c2f7;
font-size: 20px;
font-weight: bold;
}
.photo-title span {
margin-right: 20px;
}
.mui-table-view.mui-grid-view.mui-grid-9 {
background-color: white;
border: 0;
}
.mui-table-view.mui-grid-view.mui-grid-9 li {
border: 0;
}
.photo-desc p {
font-size: 18px;
}
.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
padding: 2 2;
}
/*评论样式 开始*/
.photo-comment > div span:nth-child(1) {
float: left;
font-weight: bold;
margin-left: 5px;
}
.photo-comment > div span:nth-child(2) {
float: right;
}
.photo-comment {
height: 30px;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
line-height: 30px;
margin-bottom: 5px;
}
.txt-comment {
padding: 5 5;
}
.txt-comment textarea {
margin-bottom: 5px;
}
.comment-list li {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
margin-bottom: 5px;
padding-left: 5px;
}
li {
list-style: none;
}
ul {
margin: 0;
padding: 0;
}
/*评论样式 结束*/
</style>
评论思路:
评论思路 追加数据 提交评论 抽取组件(把comment.vue抽取出来)
抽取组件以后的
其中photoshare.vue
<template>
<div class="tmpl">
<nav-bar title="图文分享"></nav-bar>
<!-- 引入返回导航 -->
<div class="photo-header">
<ul>
<li v-for="category in categorys" :key="category.id">
<a href="javascript:;" @click="loadImg(category.id)">{{category.title}}</a>
</li>
</ul>
</div>
<div class="photo-list">
<ul>
<li v-for="img in imgs" :key="img.id">
<router-link :to="{name:'photo.detail',params:{id:img.id} }">
<!-- <img :src="img.img_url"> -->
<!-- 懒加载 -->
<img v-lazy="img.img_url">
<p>
<span v-text="img.title"></span>
<br>
<span v-text="img.zhaiyao"></span>
</p>
</router-link>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data(){
return {
categorys:[],//分类
imgs:[], //图片数据
}
},
created(){
//发起请求获取导航栏数据
this.$ajax.get('getimgcategory')
.then(res=>{
this.categorys = res.data.message;
//将全局添加到数组的第一个 unshift
this.categorys.unshift({
id:0,
title:'全部'
});
})
.catch(err=>{
console.log(err);
});
//当页面加载默认传递0
this.loadImg(0); //该代码替换了下面的请求的代码,做了函数封装
//将0作为参数,获取全部图片数据
// this.$ajax.get('getimages/' + 0)
// .then(res=>{
// this.imgs = res.data.message;
// })
// .catch(err=>{
// console.log(err);
// })
},
methods:{
loadImg(id){
this.$ajax.get('getimages/' + id)
.then(res=>{
this.imgs = res.data.message;
})
.catch(err=>{
console.log(err);
})
}
}
}
</script>
<style>
.photo-header li {
list-style: none;
display: inline-block;
margin-left: 10px;
height: 30px;
}
.photo-header ul {
/*强制不换行*/
white-space: nowrap;
overflow-x: auto;
padding-left: 0px;
margin: 5;
}
/*下面的图片*/
.photo-list li {
list-style: none;
position: relative;
}
.photo-list li img {
width: 100%;
height: 230px;
vertical-align: top;
}
.photo-list ul {
padding-left: 0px;
margin: 0;
}
.photo-list p {
position: absolute;
bottom: 0px;
color: white;
background-color: rgba(0, 0, 0, 0.3);
margin-bottom: 0px;
}
.photo-list p span:nth-child(1) {
font-weight: bold;
font-size: 16px;
}
/*图片懒加载的样式*/
image[lazy=loading] {
width: 40px;
height: 300px;
margin: auto;
}
</style>
photodetail.vue
<template>
<div class="tmpl">
<!-- 组件名navBar -->
<nav-bar title="图片详情"></nav-bar>
<!-- 组件名:navbar -->
<!-- 使用:navbar-->
<div class="photo-title">
<p v-text="imgInfo.title"></p>
<span>发起日期:{{imgInfo.add_time | convertDate}}</span>
<span>{{imgInfo.click}}次浏览</span>
<span>分类:民生经济</span>
</div>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li v-for="(img,index) in imgs" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<!-- <img :src="img.src"> -->
<img class="preview-img" :src="img.src" height="100" @click="$preview.open(index, imgs)">
</li>
</ul>
<div class="photo-desc">
<p v-html="imgInfo.content"></p>
</div>
<!-- 使用评论子组件 -->
<comment :cid="pid"></comment>
</div>
</template>
<script>
export default {
data(){
return {
imgs:[],//存放缩率图
imgInfo:{},//详情数据对象
pid:this.$route.params.id, //记录当前图片id
}
},
created(){
//1:获取路由参数
// let pid = this.$route.params.id;
//2:发起请求2个
//图片详情
this.$ajax.get('getimageInfo/' + this.pid)
.then(res=>{
//一个id对应一个详情对象
this.imgInfo = res.data.message[0];
})
.catch(err=>{
console.log(err)
});
//缩略图
this.$ajax.get('getthumimages/' + this.pid)
.then(res=>{
this.imgs = res.data.message;
//forEach
this.imgs.forEach((ele)=>{
ele.w=300;
ele.h=200; //缩率图显示的高
})
})
.catch(err=>{
console.log(err)
})
}
}
</script>
<style scoped>
li {
list-style: none;
}
ul {
margin: 0;
padding: 0;
}
.photo-title {
overflow: hidden;
}
.photo-title,
.photo-desc {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
margin-bottom: 5px;
padding-left: 5px;
}
.photo-title p {
color: #13c2f7;
font-size: 20px;
font-weight: bold;
}
.photo-title span {
margin-right: 20px;
}
.mui-table-view.mui-grid-view.mui-grid-9 {
background-color: white;
border: 0;
}
.mui-table-view.mui-grid-view.mui-grid-9 li {
border: 0;
}
.photo-desc p {
font-size: 18px;
}
.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
padding: 2 2;
}
</style>
comment.vue
<template>
<div>
<!-- 评论内容开始 -->
<div class="photo-bottom">
<ul>
<li class="photo-comment">
<div>
<span>提交评论</span>
<span><a @click="goback">返回</a></span>
</div>
</li>
<li class="txt-comment">
<textarea v-model="msg"></textarea>
</li>
<li>
<mt-button @click="sendComment" size="large" type="primary">发表评论按钮</mt-button>
</li>
<li class="photo-comment">
<div>
<span>评论列表</span>
<span>66条评论</span>
</div>
</li>
</ul>
<ul class="comment-list">
<li v-for="(comment,index) in comments" :key="index">
{{comment.user_name}}:{{comment.content}} {{comment.add_time|convertDate}}
</li>
</ul>
<mt-button type="danger" size="large" plain @click="loadByPage">加载更多按钮</mt-button>
</div>
<!-- 评论内容结束 -->
<!--改变颜色<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button> -->
<!-- 改变大小
<mt-button size="small">small</mt-button>
<mt-button size="large">large</mt-button>
<mt-button size="normal">normal</mt-button>
幽灵按钮
<mt-button type="danger" plain>plain</mt-button> -->
</div>
</template>
<script>
export default {
data(){
return {
comments:[],//存放评论数据
pageIndex:1,//页码
msg:'',//发表的评论
}
},created(){
//评论操作 开始
this.loadFirst();
//评论操作 结束
},props:['cid']
,methods:{
//先调用这个函数
loadFirst(){
this.$ajax.get('getcomments/' + this.cid +'?pageindex=1')
.then(res=>{
this.comments = res.data.message;
})
.catch(err=>{
console.log(err);
})
},
//再点击按钮
loadByPage(){
this.$ajax.get('getcomments/' + this.cid +'?pageindex=' + (++this.pageIndex))
.then(res=>{
//追加
this.comments = this.comments.concat(res.data.message);
})
.catch(err=>{
console.log(err);
})
},
//发表评论
sendComment(){
//发表评论请求后台
this.$ajax.post('postcomment/'+ this.cid,'content='+this.msg)
.then(res=>{
console.log(res);
//获取最新的第一页数据
this.loadFirst();
//清空数据
this.msg = '';
})
.catch(err=>{
console.log(err);
})
},
goback(){
this.$router.go(-1);
}
}
}
</script>
<style scoped>
/*评论样式 开始*/
.photo-comment > div span:nth-child(1) {
float: left;
font-weight: bold;
margin-left: 5px;
}
.photo-comment > div span:nth-child(2) {
float: right;
}
.photo-comment {
height: 30px;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
line-height: 30px;
margin-bottom: 5px;
}
.txt-comment {
padding: 5 5;
}
.txt-comment textarea {
margin-bottom: 5px;
}
.comment-list li {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
margin-bottom: 5px;
padding-left: 5px;
}
li {
list-style: none;
}
ul {
margin: 0;
padding: 0;
}
/*评论样式 结束*/
</style>
goodlist.vue 其中包含上拉加载更多用mint-ui中的loadmore实现
<template>
<div class="tmpl" style="height:577px;">
<nav-bar title="商品列表" ></nav-bar>
<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="isAutoFill" ref="loadmore">
<!-- 上啦完毕调用该元素的onBottomLoaded函数, -->
<ul class="mui-table-view mui-grid-view">
<li v-for="prod in prods" :key="prod.id" class="mui-table-view-cell mui-media mui-col-xs-6">
<a>
<img class="mui-media-object" :src="prod.img_url">
<div class="mui-media-body">{{prod.title}}</div>
<div class="desc">
<div class="sell">
<span>¥{{prod.sell_price}}</span>
<s>¥{{prod.market_price}}</s>
</div>
<div class="detail">
<div class="hot">
热卖中
</div>
<div class="count">
剩{{prod.stock_quantity}}件
</div>
</div>
</div>
</a>
</li>
</ul>
</mt-loadmore>
</div>
</template>
<script>
export default {
data(){
return {
pageIndex:1,//页码
prods:[],//商品列表数据
allLoaded:false, //是否禁止触发上拉函数
isAutoFill:false,//是否自动触发上拉函数
}
},
created(){
this.loadMore();//1
},
methods:{
loadBottom(){
//console.log('上啦触发了');
this.loadmoreConcat();
},
loadMore(){
//发起请求获取数据填充到页面
this.$ajax.get('getgoods?pageindex=1')
.then(res=>{
this.prods = res.data.message;
})
.catch(err=>{
console.log(err);
});
}, //追加数据
loadmoreConcat(){
this.$ajax.get('getgoods?pageindex='+ (++this.pageIndex))
.then(res=>{
this.prods = this.prods.concat(res.data.message);
// console.log(this.$refs.loadmore.onBottomLoaded());
//判断是否还有数据
if(res.data.message.length != 10){
//数据不到10条,就是剩余的所有了
this.allLoaded = true;//禁止调用上拉函数了
}
// 通知上啦操作已经完结
this.$refs.loadmore.onBottomLoaded();
})
.catch(err=>{
console.log(err);
})
}
}
}
</script>
<style scoped>
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn) {
margin: 0px;
padding: 0px;
border: 1px solid #5c5c5c;
box-shadow: 0 0 4px #666;
}
.sell > span {
float: left;
color: red;
text-align: left;
}
.detail >.hot {
float: left;
text-align: left;
font-size: 15px;
}
.detail >.count {
float: right;
text-align: right;
font-size: 15px;
}
/*撑开,去除浮动没有的高度*/
.detail {
overflow: hidden;
}
.desc {
color: rgba(92, 92, 92, 0.8);
background-color: rgba(0, 0, 0, 0.2);
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
height: 200px;
}
</style>
gooddetail.vue
<template>
<div>
<nav-bar title="商品详情"></nav-bar>
<div class="outer-swiper">
<div class="swiper">
<my-swipe :url="goodsDetailUrl"></my-swipe>
</div>
</div>
<div class="product-desc">
<ul>
<li><span class="product-desc-span">
{{prodInfo.title}}
</span></li>
<li class="price-li">市场价:
<s>¥{{prodInfo.market_price}}</s> 销售价:<span>¥{{prodInfo.sell_price}}</span></li>
<li class="number-li">购买数量:<span>-</span><span>1</span><span>+</span></li>
<li>
<mt-button type="primary">立即购买</mt-button>
<mt-button type="danger">加入购物车</mt-button>
</li>
</ul>
</div>
<div class="ball" v-if="isShow"></div>
<div class="product-props">
<ul>
<li>商品参数</li>
<li>商品货号:{{prodInfo.goods_no}}</li>
<li>库存情况:{{prodInfo.stock_quantity}}件</li>
<li>上架时间:{{prodInfo.add_time | convertDate}}</li>
</ul>
</div>
<div class="product-info">
<ul>
<li>
<mt-button type="primary" size="large" plain>图文介绍</mt-button>
</li>
<li>
<mt-button type="danger" size="large" plain>商品评论</mt-button>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data(){
return {
isShow:false,//控制小球是否显示
imgs:[],//缩略图数组
prodInfo:{}, //商品信息
goodsDetailUrl:'',//商品详情轮播图url
}
},
created(){
//1:获取路由参数id
let id = this.$route.query.id;
//2:获取详情数据
// this.$ajax.get('goods/getinfo/' + id)
// .then(res=>{
// this.prodInfo = res.data.message[0];
// })
// .catch(err=>{
// console.log(err);
// })
// //3:获取轮播图数据
// this.$ajax.get('getthumimages/' + id)
// .then(res=>{
// this.imgs = res.data.message;
// })
// .catch(err=>{
// console.log(err);
// })
//拼接url:传递给子组件
this.goodsDetailUrl = 'getthumimages/' + id;
//使用合并请求
this.$ajax.all([
this.$ajax.get('goods/getinfo/' + id)
// ,this.$ajax.get('getthumimages/' + id)
])
//分发响应
.then(this.$ajax.spread( (resInfo)=>{
this.prodInfo = resInfo.data.message[0];
//this.imgs = resImgs.data.message;
}) )
.catch(err=>{
console.log(err);
})
}
}
</script>
<style scoped>
.ball-enter-active {
animation: bounce-in 1s;
}
@keyframes bounce-in {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(140px, -50px, 0);
}
75% {
transform: translate3d(160px, 0px, 0);
}
100% {
transform: translate3d(140px, 300px, 0);
}
}
.swiper {
border: 1px solid rgba(0, 0, 0, 0.2);
margin: 8px;
width: 95%;
border-radius: 15px;
overflow: hidden;
}
.outer-swiper,
.product-desc,
.product-props,
.product-info {
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.2);
margin: 3px;
}
/*请ulpadding*/
.outer-swiper ul,
.product-desc ul,
.product-props ul,
.product-info ul {
padding: 0;
}
.product-desc ul li,
.product-props ul li,
.product-info ul li {
list-style: none;
font-size: 15px;
color: rgba(0, 0, 0, 0.5);
margin-top: 8px;
}
.product-desc ul >:nth-child(1) span {
color: blue;
font-size: 22px;
font-weight: bold;
}
.product-desc ul >:nth-child(1) {
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.product-desc ul,
.product-info ul,
.product-props ul {
padding-left: 10px;
}
.price-li span {
color: red;
font-size: 25px;
}
.price-li s {
margin-right: 16px;
}
/*加减*/
.number-li span {
display: inline-block;
border: 2px solid rgba(0, 0, 0, 0.1);
width: 25px;
}
/*商品参数*/
.product-props ul >:nth-child(1) {
text-align: left;
}
.product-props ul:not(:nth-child(1)) {
margin-left: 40px;
}
.product-info ul {
margin-bottom: 70px;
padding: 0 5;
}
.number-li span {
text-align: center;
}
.number-li >:nth-child(2) {
width: 40px;
}
.ball {
border-radius: 50%;
background-color: red;
width: 24px;
height: 24px;
position: absolute;
top: 440px;
left: 120px;
display: inline-block;
z-index: 9999;
}
</style>
loading main.js中修改
'use strict';
//引入第三方包 开始
import Vue from 'vue';
//VueRouter:引入路由对象
import VueRouter from 'vue-router';
//VueRouter:安装插件
Vue.use(VueRouter);
//Mint:引入mint-ui
import Mint from 'mint-ui';
//Mint:引入css
import 'mint-ui/lib/style.css';
//Mint:安装插件
Vue.use(Mint);
//MUI:引入mui的样式
import './static/vendor/mui/dist/css/mui.css';
//全局样式
import './static/css/global.css';
//Axios:引入axios
import Axios from 'axios';
//Axios:挂载原型
Vue.prototype.$ajax = Axios;
//Axios:默认配置
Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/';
//Axios:拦截器操作loadding
Axios.interceptors.request.use(function(config){
//显示图标
Mint.Indicator.open({
text: '加载中...',
spinnerType: 'fading-circle'
});
return config;
});
Axios.interceptors.response.use(function(config){
//隐藏图标
Mint.Indicator.close();
//获取到config中的data,进行加工
return config;
});
//Moment:引入moment
import Moment from 'moment';
//VuePreview:引入vue-preview
import VuePreview from 'vue-preview'
Vue.use(VuePreview);
//引入第三方包 结束
//引入全局组件需要的组件对象 开始
import NavBar from './components/common/navBar.vue';
import Comment from './components/common/comment.vue';
import MySwipe from './components/common/mySwipe.vue';
//引入全局组件需要的组件对象 结束
//定义成全局组件或过滤器,大家都能使用 开始
Vue.filter('convertDate',function(value){
return Moment(value).format('YYYY-MM-DD');
});
Vue.component('navBar',NavBar); //使用最好以nav-bar
Vue.component('comment',Comment); //使用要以comment
Vue.component('mySwipe',MySwipe); //使用要以my-Swipe
//定义全局组件或过滤器 结束
//引入自己的vue文件 开始
import App from './app.vue';
import Home from './components/home/home.vue';
import Member from './components/member/member.vue';
import Shopcart from './components/shopcart/shopcart.vue';
import Search from './components/search/search.vue';
import NewsList from './components/news/newsList.vue';
import NewsDetail from './components/news/newsDetail.vue';
import PhotoShare from './components/photo/photoShare.vue';
import PhotoDetail from './components/photo/photoDetail.vue';
import GoodsList from './components/goods/goodsList.vue';
import GoodsDetail from './components/goods/goodsDetail.vue';
//引入自己的vue文件 结尾
//VueRouter:创建对象并配置路由规则!!!导航
let router = new VueRouter({
linkActiveClass:'mui-active',
routes: [
//VueRouter:配置路由规则
{ path: '/', redirect: { name: 'home' } }, //重定向
{ name: 'home', path: '/home', component: Home },//首页
{ name:'member',path:'/member',component: Member}, //会员
{ name: 'shopcart',path:'/shopcart',component:Shopcart}, //购物车
{ name: 'search',path:'/search',component:Search}, //查找
{ name:'news.list',path:'/news/list',component:NewsList}, //新闻列表
{ name:'news.detail',path:'/news/detail',component:NewsDetail}, //新闻详情
{ name:'photo.share',path:'/photo/share',component:PhotoShare}, //图文分享
{ name:'photo.detail',path:'/photo/detail/:id',component:PhotoDetail},//图片详情
{ name:'goods.list',path:'/goods/list', component:GoodsList}, //商品列表
{ name:'goods.detail',path:'/goods/detail',component:GoodsDetail}, //商品详情
]
});
//创建vue实例
new Vue({
el: '#app',
router,
render: c => c(App)
})