main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入 图片懒加载
import VueLazyload from 'vue-lazyload' // npm install vue-lazyload --save
Vue.config.productionTip = false
// 去除全局的默认样式
import '@/styles/base.less'
import '@/styles/nav.less'
// 引入全局时间格式化的过滤器
import "@/utils/formater.js";
// 引入axios
import axios from 'axios';
Vue.prototype.$http = axios;
import {
Tabbar,TabbarItem,NavBar,Swipe,SwipeItem,Grid,GridItem,Toast,Button,Tab,Tabs,Form,Field,
Stepper,Card,Switch,SwipeCell,SubmitBar,Checkbox
} from 'vant';
Vue.use(Checkbox);
Vue.use(SubmitBar);
Vue.use(SwipeCell);
Vue.use(Switch);
Vue.use(Card);
Vue.use(Stepper);
Vue.use(Form);
Vue.use(Field);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Button);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(NavBar)
Vue.use(Toast)
// Vue.use(VueLazyload)
// 定义loading图
const loadimage = require('./assets/loading.gif')
const errorimage = require('./assets/error.gif')
Vue.use(VueLazyload, {
preLoad: 1.3,
error: errorimage,
loading: loadimage,
attempt: 1
})
// 导入图片预览工具
import VuePreview from 'vue-preview';
Vue.use(VuePreview);
new Vue({
router,
store,
data: {
n: true // 默认让 tabbar 显示
},
render: h => h(App)
}).$mount('#app')
App.vue
<template>
<div id="app">
<van-nav-bar title="shop项目练习" :left-arrow="!n" @click-left="onClickBack" />
<van-tabbar v-model="active" route v-if="n">
<van-tabbar-item icon="home-o" replace to="/home">首页</van-tabbar-item>
<van-tabbar-item icon="friends-o" replace to="/member">会员</van-tabbar-item>
<van-tabbar-item icon="cart-o" replace to="/shopCar" badge="5">购物车</van-tabbar-item>
<van-tabbar-item icon="search" replace to="/search">搜索</van-tabbar-item>
</van-tabbar>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
active: 0
}
},
computed: {
n() {
// console.log("this:", this);
return this.$root.n;
}
},
methods: {
onClickBack() {
this.$router.go(-1);
// 让当前 返回按钮 隐藏
// 让当前底部菜单显示
this.$root.n = true;
}
}
}
</script>
<style lang="less">
#app {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #efeff4;
}
</style>
utils/formater.js
// 时间过滤器
import Vue from 'vue'
Vue.filter("formatDate", function(time){
// console.log("time:", time);
let times = new Date(time);
let Y = times.getFullYear();
let M = (times.getMonth() + 1).toString().padStart(2, '0')
let D = times.getDate().toString().padStart(2, '0')
let h = times.getHours().toString().padStart(2, '0')
let m = times.getMinutes().toString().padStart(2, '0')
let s = times.getSeconds().toString().padStart(2, '0')
// console.log("M:", M);
return `${Y}/${M}/${D} ${h}:${m}:${s}`
})
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 初始化状态
state: {
// 默认声明一个数组 来 保存 购物车的数据
shopcar: JSON.parse(localStorage.getItem('shopcar')) || []
},
// getters 派生新的状态
getters: {
shopcar_goods(state) {
return state.shopcar;
}
},
// 同步更改state数据
mutations: {
// 加入购物车
addtocar(state, payload) {
// console.log("state:", state, "payload:", payload);
// state.shopcar.push(payload);
let flag = false;
state.shopcar.some(item => {
// console.log("item:", item);
if(item.id == payload.id) {
// id相同 意味着 之前已经加入到了购物车 只需要改变数据的数量即可
item.count += Number(payload.count);
// 跳出当前循环
flag = true;
}
})
// 在购物车中没有加入该数据是 直接添加到购物车即可
if(!flag) {
state.shopcar.push(payload);
}
localStorage.setItem("shopcar", JSON.stringify(state.shopcar));
}
},
// 异步提交mutations 来 修改state数据
actions: {
}
})
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/tabBar/home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/home'
}, {
path: '/home',
name: 'home',
component: Home
}, {
path: '/member',
name: 'member',
component: () => import('@/components/tabBar/member.vue')
}, {
path: '/shopCar',
name: 'shopCar',
component: () => import('@/components/tabBar/shopCar.vue')
}, {
path: '/search',
name: 'search',
component: () => import('@/components/tabBar/search.vue')
}, {
path: '/newsList',
name: 'newsList',
component: () => import('@/components/news/newsList.vue')
}, /* {
path: '/newsInfo',
name: 'newsInfo',
component: () => import('@/components/news/newsListInfo.vue')
}, */ {
path: '/newsInfo/:id',
name: 'newsInfo',
component: () => import('@/components/news/newsListInfo.vue')
}, {
path: '/picList',
name: 'picList',
component: () => import('@/components/pics/picList.vue')
}, /* {
path: '/picListInfo',
name: 'picListInfo',
component: () => import('@/components/pics/picListInfo.vue')
}, {
path: '/picListInfo/:id',
name: 'picListInfo',
component: () => import('@/components/pics/picListInfo.vue')
} ,*/ {
path: '/picListInfo',
name: 'picListInfo',
component: () => import('@/components/pics/picListInfo.vue')
}, {
path: '/goodsList',
name: 'goodsList',
component: () => import('@/components/goods/goodsList.vue')
}, {
path: '/goodsListInfo',
name: 'goodsListInfo',
component: () => import('@/components/goods/goodsListInfo.vue')
}
]
const router = new VueRouter({
routes
})
export default router
components/goods/goodsList.vue
<template>
<div class="goods">
<div class="shop_goods">
<div class="goods_item" v-for="item in goodsList" :key="item.id" @click="goToGoodsDetail(item.id)">
<img class="img" v-lazy="item.img_url" />
<div class="title">{{ item.title }}</div>
<div class="info">
<p class="goods_price">
<span class="now_price">现价: {{ item.sell_price }}</span>
<span class="older_price">原价: {{ item.market_price }}</span>
</p>
<p class="goods_sell">
<span>热卖中</span>
<span>剩余{{ item.stock_quantity }}件</span>
</p>
</div>
</div>
</div>
<van-button type="info" block @click="moreGoods">加载更多</van-button>
</div>
</template>
<script>
export default {
data() {
return {
pageindex: 1,
goodsList: [],
}
},
created() {
this.$root.n = false;
this.getGoodsList();
},
methods: {
// 获取商品列表数据
getGoodsList() {
this.$http.get(`http://www.liulongbin.top:3005/api/getgoods?pageindex=${this.pageindex}`)
.then( res => {
// console.log("res:", res);
if(res.data.message.length == 0) {
this.$toast({
message: '已经是最后一页了'
})
} else {
this.goodsList = this.goodsList.concat(res.data.message);
}
})
},
// 加载更多功能
moreGoods() {
// 更改页数
this.pageindex++;
this.getGoodsList();
},
// 跳转详情页
goToGoodsDetail(id) {
this.$router.push({name: 'goodsListInfo', query: {id: id}})
}
}
}
</script>
<style scoped lang="less">
.goods {
margin-top: 46px;
.shop_goods {
padding: 5px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.goods_item {
width: 49%;
border: 1px solid #ccc;
padding: 2px;
margin: 5px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #8f8f94;
background: #fff;
.img {
width: 100%;
background: #ccc;
}
.title {
font-size: 14px;
padding-left: 5px;
}
.info {
color: #8f8f94;
p {
margin: 0;
padding: 5px;
.now_price {
font-size: 16px;
color: #f00;
}
.older_price {
font-size: 12px;
margin-left: 10px;
}
}
.goods_sell {
display: flex;
justify-content: space-between;
font-size: 12px;
}
}
}
}
.btn {
margin-bottom: 10px;
}
}
</style>
components/goods/goodsListInfo.vue
<template>
<div class="goodsInfo">
<div class="goodsInfo_swiper">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="(item, index) in goodsBannerList" :key="index">
<img class="img" :src="item.src" alt="" />
</van-swipe-item>
</van-swipe>
</div>
<div class="info">
<div>商品名称123123123</div>
<div class="">
<p>
<span>市场价: {{ goodsInfo.market_price }}</span>
<span>销售价: {{ goodsInfo.sell_price }}</span>
</p>
<p>
<van-field name="stepper" label="购买数量">
<template #input>
<van-stepper v-model="stepper" />
</template>
</van-field>
</p>
<p>
<van-button color="#dd524d" plain @click="goToCar">立即购买</van-button>
<van-button color="#8a6de9" plain @click="addCar" >加入购物车</van-button>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
id: null,
goodsBannerList: [],
stepper: 0,
goodsInfo: {}
};
},
created() {
// console.log("this.$route:", this.$route);
this.id = this.$route.query.id;
this.getGoodsBanner(this.id);
this.getGoodsInfo(this.id)
},
methods: {
// 获取当前商品详情的 轮播图
getGoodsBanner(id) {
this.$http
.get(`http://www.liulongbin.top:3005/api/getthumimages/${id}`)
.then((res) => {
// console.log("res:", res);
this.goodsBannerList = res.data.message;
});
},
// 获取商品详情数据
getGoodsInfo(id) {
this.$http.get(`http://www.liulongbin.top:3005/api/goods/getinfo/${id}`)
.then( res => {
// console.log("res:", res);
this.goodsInfo = res.data.message[0]
})
},
// 立即购买 跳转到 购物车
goToCar() {
this.$router.push('/shopCar');
this.$root.n = true;
},
// 加入购物车
addCar() {
// 要将数据放置在购物车页面
/*
{
id: 88, // 商品id
title: title, // 商品的标题
price: 1.28, // 商品价格
count: stepper // 商品数量
selected: true // 商品默认是被选中状态
}
*/
let goods = {
id: this.id,
title: this.goodsInfo.title,
price: this.goodsInfo.sell_price,
count: this.stepper,
selected: true
}
// console.log("goods:", goods);
// 通过commit 触发 addtocar 这个事件类型 来提交 加入购物车的数据
this.$store.commit('addtocar', goods);
}
},
};
</script>
<style scoped lang="less">
.goodsInfo {
margin-top: 46px;
padding-top: 10px;
.goodsInfo_swiper {
width: 95%;
height: 200px;
background: #ffffff;
margin: 0px auto 10px;
}
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
text-align: center;
}
.img {
width: 357px;
height: 200px;
}
.info {
width: 95%;
margin: 0 auto;
background: #ffffff;
padding: 0 10px 10px;
box-sizing: border-box;
border-radius: 5px;
}
}
</style>
components/news/newsList.vue
<template>
<div class="newList">
<div class="newListContent">
<div class="listItem" v-for="item in list" :key="item.id" @click="goToNewsInfo(item.id)">
<img class="img" :src="item.img_url" alt="" />
<div class="content">
<span class="content-desc">{{ item.title }}</span>
<span class="content-bottom">
<span>发表时间: {{ item.add_time | formatDate }}</span>
<span>点击次数: {{ item.click }}</span>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
};
},
created() {
this.$root.n = false;
this.getNewsList();
},
methods: {
// 页面初始化 首屏渲染
getNewsList() {
this.$http
.get("http://www.liulongbin.top:3005/api/getnewslist")
.then((res) => {
// console.log("res:", res);
if(res.data.status == 0) {
this.list = res.data.message;
// console.log(this)
this.$toast({
message: "拉取成功",
position: 'bottom'
})
}
});
},
// 进入详情页面
goToNewsInfo(id) {
// console.log("id:", id);
// this.$router.push({name: 'newsInfo', params: {id: id}})
this.$router.push(`/newsInfo/${id}`)
}
},
};
</script>
<style scoped lang="less">
.newList {
width: 100%;
padding-left: 10px;
box-sizing: border-box;
background: #efeff4;
margin-top: 50px;
.newListContent {
overflow-y: scroll;
.listItem {
display: flex;
padding: 10px 10px 10px 0;
border-bottom: 1px solid #ccc;
.img {
width: 42px;
height: 42px;
margin-right: 10px;
}
.content {
width: 85%;
display: flex;
flex-direction: column;
font-size: 14px;
color: #8f8f94;
justify-content: center;
.content-desc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content-bottom {
display: flex;
justify-content: space-between;
}
}
}
}
}
</style>
components/news/newsListInfo.vue
<template>
<div class="newsDetail">
<div class="detailInfo">
<div class="content">
<span class="content-desc">{{ newsInfo.title }}</span>
<span class="content-bottom">
<span>发表时间: {{ newsInfo.add_time | formatDate }}</span>
<span>点击次数: {{ newsInfo.click }}</span>
</span>
</div>
<div v-html="newsInfo.content"></div>
<!-- 发表评论 -->
<comment :id="id"/>
</div>
</div>
</template>
<script>
import comment from '@/components/subComponents/comment.vue'
export default {
data() {
return {
id: "",
newsInfo: {},
};
},
created() {
// console.log("this.$route:", this.$route);
// 隐藏底部菜单
this.$root.n = false;
this.id = this.$route.params.id;
this.getNewsListInfo(this.id);
},
methods: {
// 获取详情页数据
getNewsListInfo(id) {
this.$http
.get("http://www.liulongbin.top:3005/api/getnew/" + id)
.then((res) => {
// console.log("res:", res);
this.newsInfo = res.data.message[0];
});
},
},
components: {
comment
}
};
</script>
<style scoped lang="less">
.newsDetail {
.detailInfo {
margin-top: 50px;
.content {
width: 100%;
height: 50px;
display: flex;
flex-direction: column;
font-size: 14px;
color: #8f8f94;
justify-content: center;
padding: 0 10px;
box-sizing: border-box;
span {
height: 25px;
line-height: 25px;
}
.content-desc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content-bottom {
display: flex;
justify-content: space-between;
}
}
}
}
</style>
components/pics/picList.vue
<template>
<div class="pic">
<van-tabs title-active-color="#007aff" @click="getPicList">
<van-tab
v-for="item in picCategoryList"
:key="item.id"
:title="item.title"
>
<!-- -->
<ul class="photo_list">
<li v-for="picItem in picList" :key="picItem.id" class="picItem" @click="goToDetail(picItem.id)">
<img v-lazy="picItem.img_url" alt="" />
<div class="picInfo">
<h3 class="picTitle">{{ picItem.title }}</h3>
<div class="picDes">{{ picItem.zhaiyao }}</div>
</div>
</li>
</ul>
</van-tab>
</van-tabs>
</div>
</template>
<script>
export default {
data() {
return {
picCategoryList: [],
id: null, // 用来存储 tab页 的 id
picList: [],
};
},
created() {
this.$root.n = false;
this.getPicCategory();
// 页面初始化时 执行 全部数据渲染 id = 0;
this.getPicListById(0);
},
methods: {
// 获取所有图片的分类信息
getPicCategory() {
this.$http
.get("http://www.liulongbin.top:3005/api/getimgcategory")
.then((res) => {
// console.log("res:", res);
this.picCategoryList = res.data.message;
this.picCategoryList.unshift({ id: 0, title: "全部" });
});
},
// 获取对应的数据列表
getPicList(name, title) {
console.log("title:", title);
let arr = this.picCategoryList.filter((cv) => {
return cv.title === title;
});
this.id = arr[0].id;
// console.log("arr:", arr);
this.getPicListById(this.id);
},
getPicListById(id) {
// 根据不同的id 获取 对应的 数据
this.$http
.get("http://www.liulongbin.top:3005/api/getimages/" + id)
.then((res) => {
// console.log("res:", res);
this.picList = res.data.message;
});
},
// 跳转到详情页
goToDetail(id) {
// this.$router.push({name: 'picListInfo', params: { id: id }})
// this.$router.push(`/picListInfo/${id}`)
this.$router.push({name: 'picListInfo', query: {id: id}})
}
},
};
</script>
<style scoped lang="less">
.pic {
margin-top: 46px;
background: #efeff4;
}
.photo_list {
margin: 10px;
li {
margin-bottom: 5px;
position: relative;
img {
box-shadow: 0 0 5px rgb(255, 35, 119);
width: 100%;
}
.picInfo {
position: absolute;
bottom: 0;
width: 100%;
// height: 100px;
height: 80px;
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
.picTitle {
margin: 0;
font-size: 13px;
}
.picDes {
font-size: 12px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
}
}
</style>
components/pics/picListInfo.vue
<template>
<div class="picDetial">
<!-- 111111111 -->
<div class="picInfo">
<h3>{{ picInfo.title }}</h3>
<p>
<span>发表时间: {{ picInfo.add_time | formatDate}}</span>
<span>点击次数: {{ picInfo.click }}</span>
</p>
</div>
<!-- 缩略图显示 -->
<vue-preview :slides="picThumbs" class="imgPrev"></vue-preview>
</div>
</template>
<script>
export default {
data() {
return {
id: null,
picInfo: {}, // 存储详情数据
picThumbs: [] // 存储缩略图地址
}
},
created() {
// console.log("this.$route:", this.$route);
this.id = this.$route.query.id;
this.getListInfo(this.id);
this.getThumbs(this.id);
},
methods: {
// 获取对应id 的详情数据
getListInfo(id) {
this.$http.get(`http://www.liulongbin.top:3005/api/getimageInfo/${id}`)
.then( res => {
// console.log("res:", res);
this.picInfo = res.data.message[0];
})
},
// 获取对应id 的缩略图
getThumbs(id){
this.$http.get(`http://www.liulongbin.top:3005/api/getthumimages/${id}`)
.then( res => {
console.log("res:", res);
// this.picThumbs = res.data.message;
res.data.message.forEach( item => {
item.w = 300;
item.h = 300;
item.src = item.src;
item.msrc = item.src;
});
// console.log("res.data:", res.data);
this.picThumbs = res.data.message;
})
}
}
}
</script>
<style scoped>
.picDetial {
margin-top: 46px;
background: #efeff4;
}
</style>
components/subComponents/comment.vue
<template>
<div class="picDetial">
<!-- 111111111 -->
<div class="picInfo">
<h3>{{ picInfo.title }}</h3>
<p>
<span>发表时间: {{ picInfo.add_time | formatDate}}</span>
<span>点击次数: {{ picInfo.click }}</span>
</p>
</div>
<!-- 缩略图显示 -->
<vue-preview :slides="picThumbs" class="imgPrev"></vue-preview>
</div>
</template>
<script>
export default {
data() {
return {
id: null,
picInfo: {}, // 存储详情数据
picThumbs: [] // 存储缩略图地址
}
},
created() {
// console.log("this.$route:", this.$route);
this.id = this.$route.query.id;
this.getListInfo(this.id);
this.getThumbs(this.id);
},
methods: {
// 获取对应id 的详情数据
getListInfo(id) {
this.$http.get(`http://www.liulongbin.top:3005/api/getimageInfo/${id}`)
.then( res => {
// console.log("res:", res);
this.picInfo = res.data.message[0];
})
},
// 获取对应id 的缩略图
getThumbs(id){
this.$http.get(`http://www.liulongbin.top:3005/api/getthumimages/${id}`)
.then( res => {
console.log("res:", res);
// this.picThumbs = res.data.message;
res.data.message.forEach( item => {
item.w = 300;
item.h = 300;
item.src = item.src;
item.msrc = item.src;
});
// console.log("res.data:", res.data);
this.picThumbs = res.data.message;
})
}
}
}
</script>
<style scoped>
.picDetial {
margin-top: 46px;
background: #efeff4;
}
</style>
components/tabBar/home.vue
<template>
<div class="home">
<!-- 轮播图组件 -->
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="item in swipeList" :key="item.id">
<img :src="item.picUrl" />
</van-swipe-item>
</van-swipe>
<!-- 九宫格 -->
<van-grid :column-num="3">
<van-grid-item icon="wap-home-o" text="新闻资讯" to="/newsList" />
<van-grid-item icon="photo-o" text="图片分享" to="/picList" />
<van-grid-item icon="cart-o" text="商品购买" to="/goodsList" />
<van-grid-item icon="volume-o" text="留言反馈" />
<van-grid-item icon="search" text="search" />
<van-grid-item icon="phone-o" text="phone" />
</van-grid>
</div>
</template>
<script>
export default {
data() {
return {
swipeList: [], // 轮播图
};
},
created() {
// console.log("this.$http:", this.$http);
this.getSwiper();
},
methods: {
// 轮播图
getSwiper() {
this.$http.get("https://api.it120.cc/ljf/banner/list").then((res) => {
// console.log("res:", res);
this.swipeList = res.data.data;
});
},
},
};
</script>
<style scoped lang="less">
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
height: 200px;
text-align: center;
// background-color: #39a9ed;
img {
width: 100%;
height: 200px;
background-size: cover;
}
}
</style>
components/tabBar/member.vue
<template>
<div>
会员
</div>
</template>
<script>
</script>
<style scoped>
</style>
components/tabBar/search.vue
<template>
<div>
搜索
</div>
</template>
<script>
</script>
<style scoped>
</style>
components/tabBar/shopCar.vue
<template>
<div class="shopCar">
<div class="shopGoodsItem" v-for="item in shopGoodsList" :key="item.id">
<van-swipe-cell>
<van-switch v-model="item.selected" size="18px" />
<van-card
:price="item.price"
:title="item.title"
class="goods-card"
thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
/>
<template>
<van-stepper v-model="item.count" />
</template>
<template #right>
<van-button square text="删除" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
<van-checkbox v-model="checked">全选</van-checkbox>
</van-submit-bar>
</div>
</div>
</template>
<script>
export default {
data() {
return {
checked: true,
shopGoodsList: [],
};
},
computed: {
goods() {
return this.$store.getters.shopcar_goods;
},
},
created() {
// console.log("this.goods:", this.goods);
this.getShopGoodsList();
},
methods: {
getShopGoodsList() {
this.shopGoodsList = this.goods;
},
onSubmit() {
console.log("qwertyuiop")
}
},
};
</script>
<style scoped lang="less">
.shopCar {
margin-top: 46px;
}
.goods-card {
margin: 0;
background-color: #ffffff;
}
.delete-button {
height: 100%;
}
.shopGoodsItem {
margin: 10px 0;
}
</style>
styles/nav.less
#app .van-nav-bar .van-nav-bar__content {
background: #9b9bf4;
}
#app .van-nav-bar .van-nav-bar__content .van-nav-bar__title {
color: #ffffff;
}
.home .my-swipe .van-swipe__indicators .van-swipe__indicator {
background: black;
opacity: 0.7;
}
#app .van-nav-bar .van-icon {
color: #fff;
font-size: 20px;
}
#app .van-nav-bar {
position: fixed;
width: 100%;
top: 0;
}
.pic .van-tabs .van-tabs__wrap .van-tabs__nav .van-tabs__line {
width: 0;
height: 0;
}
styles/base.less
html, body {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
.newsDetail .detailInfo p {
font-size: 14px;
color: #8f8f94;
padding: 0px 10px 10px 10px;
}
h1 {
margin: 0;
padding: 0;
}
.shopCar {
button {
border: none;
}
.van-swipe-cell__wrapper {
display: flex;
align-items: center;
position: relative;
box-sizing: border-box;
}
.van-switch {
position: absolute;
z-index: 999;
margin-left: 10px;
}
.van-card {
width: 100%;
box-sizing: border-box;
}
.van-image__img {
margin-left: 45px;
}
.van-swipe-cell__right {
right: -1px;
}
.van-card__content {
margin-left: 50px;
}
.van-stepper {
position: absolute;
right: 20px;
bottom: 6px
}
.van-submit-bar {
bottom: 55px;
}
}