first commit
commit
316944d9e2
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# shangpinhui
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
// 项目在发布时需要用到的babel插件数组
|
||||
const proPlugins = [];
|
||||
// 如果当前是生产环境，则使用去掉console的插件
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
proPlugins.push('transform-remove-console');
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
],
|
||||
"plugins": [
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
},
|
||||
...proPlugins
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[.ShellClassInfo]
|
||||
IconResource=C:\WINDOWS\System32\SHELL32.dll,41
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
// 配置@ 代表的是src文件夹，文件多就方便
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
// 不能在这使用
|
||||
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,57 @@
|
|||
{
|
||||
"name": "shangpinhui",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve --open",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.1.3",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.12",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^5.0.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"particles.js": "^2.0.0",
|
||||
"qrcode": "^1.5.1",
|
||||
"swiper": "^5.4.5",
|
||||
"vee-validate": "^2.2.15",
|
||||
"vue": "^2.6.14",
|
||||
"vue-lazyload": "^1.3.3",
|
||||
"vue-router": "^3.4.9",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"babel-plugin-component": "^1.1.1",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 459 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<!-- <%= htmlWebpackPlugin.options.title %> -->
|
||||
<title>
|
||||
Lineason购物平台
|
||||
</title>
|
||||
<!-- 引入清除默认的样式 -->
|
||||
<link rel="stylesheet" href="./reset.css">
|
||||
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3771470_04u9qr33g049.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
@import "./iconfont.css";
|
||||
|
||||
/* 清除内外边距 */
|
||||
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
|
||||
dl, dt, dd, ul, ol, li,
|
||||
pre,
|
||||
fieldset, lengend, button, input, textarea,
|
||||
th, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 设置默认字体 */
|
||||
body,
|
||||
button, input, select, textarea { /* for ie */
|
||||
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
|
||||
font: 12px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
|
||||
h2 { font-size: 16px; }
|
||||
h3 { font-size: 14px; }
|
||||
h4, h5, h6 { font-size: 100%; }
|
||||
|
||||
address, cite, dfn, em, var, i{ font-style: normal; } /* 将斜体扶正 */
|
||||
b, strong{ font-weight: normal; } /* 将粗体扶细 */
|
||||
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
|
||||
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
|
||||
|
||||
/* 重置列表元素 */
|
||||
ul, ol { list-style: none; }
|
||||
|
||||
/* 重置文本格式元素 */
|
||||
a { text-decoration: none; color: #666;}
|
||||
|
||||
|
||||
/* 重置表单元素 */
|
||||
legend { color: #000; } /* for ie6 */
|
||||
fieldset, img { border: none; }
|
||||
button, input, select, textarea {
|
||||
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
|
||||
}
|
||||
|
||||
/* 重置表格元素 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* 重置 hr */
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
}
|
||||
.clearFix::after{
|
||||
content:"";
|
||||
display: block;
|
||||
clear:both;
|
||||
}
|
||||
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
|
||||
html { overflow-y: scroll; }
|
||||
|
||||
a:link:hover{
|
||||
color : rgb(79, 76, 212) !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 清除浮动 */
|
||||
.clearfix::after {
|
||||
display: block;
|
||||
height: 0;
|
||||
content: "";
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<div class="body">
|
||||
<Header></Header>
|
||||
<router-view></router-view>
|
||||
<Footer v-show="$route.meta.show"></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from './components/Header'
|
||||
import Footer from './components/Footer'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Header,
|
||||
Footer
|
||||
},
|
||||
// 当组件挂载完成后,触发接口数据
|
||||
mounted() {
|
||||
//通知Vuex触发categoryList这个方法
|
||||
this.$store.dispatch('categoryList')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scopd></style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import requests from "@/utils/request"
|
||||
|
||||
|
||||
// get请求方式并携带一个参数 根据id获取商品详情
|
||||
export const getdetaillist = (skuId) => requests({
|
||||
url: `/api/item/${skuId}`,
|
||||
method: "get"
|
||||
})
|
||||
|
||||
// /api/cart/addToCart/{ skuId }/{ skuNum } 添加购物车 (更新某一个产品的个数)
|
||||
|
||||
// skuNum
|
||||
// 商品数量
|
||||
// 正数代表增加
|
||||
// 负数代表减少
|
||||
|
||||
export const addToCart = (skuId, skuNum) => requests({
|
||||
url: `/api/cart/addToCart/${skuId}/${skuNum}`,
|
||||
method: "post"
|
||||
})
|
||||
|
||||
// 获取购物车列表的接口
|
||||
export const getShopcartlist = () => requests.get("/api/cart/cartList")
|
||||
// export const getShopcartlist=()=>requests({
|
||||
// url:"/api/cart/cartList",
|
||||
// method: "get"
|
||||
// })
|
||||
|
||||
// 根据商品id删除购物车对应的商品
|
||||
export const deleteshopcartlist = (skuId) => requests.delete(`/api/cart/deleteCart/${skuId}`)
|
||||
|
||||
// export const deleteshopcartlist2=(skuId)=>requests({url:`/api/cart/deleteCart/${skuId}`,method:'delete'})
|
||||
|
||||
|
||||
// 8. 切换商品选中状态checked
|
||||
export const changeshopcartchecked=(skuID,isChecked)=>requests.get(`/api/cart/checkCart/${skuID}/${isChecked}`)
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import requests from "@/utils/request";
|
||||
import mockrequest from "@/utils/mockrequest"
|
||||
//向外按需导出一个api函数
|
||||
|
||||
// export const getcategroylist = function () {
|
||||
// return requests.get("/api/product/getBaseCategoryList");
|
||||
// };
|
||||
|
||||
export const getcategroylist=()=>requests.get("/api/product/getBaseCategoryList")
|
||||
|
||||
// export const getmockbannerlist = function () {
|
||||
// return mockrequest.get("/banner");
|
||||
// };
|
||||
|
||||
export const getmockbannerlist=()=>mockrequest.get('/banner')
|
||||
|
||||
export const getmockfloorslist=()=>mockrequest.get('/floors')
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import requests from '@/utils/request'
|
||||
|
||||
// 获取验证码
|
||||
export const huoquyanzhengma = (phone) => requests.get(`/api/user/passport/sendCode/${phone}`)
|
||||
|
||||
// 完成注册
|
||||
export const finishzhuce = (params) =>
|
||||
requests({
|
||||
url: '/api/user/passport/register',
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
|
||||
// 根据账号和密码登录
|
||||
export const login = (params) =>
|
||||
requests({
|
||||
url: '/api/user/passport/login',
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
|
||||
// 请求拦截器携带token获取用户信息
|
||||
export const getpeoplemessage = () => requests.get('/api/user/passport/auth/getUserInfo')
|
||||
|
||||
|
||||
// 退出登录
|
||||
export const removelogin = () => requests.get('/api/user/passport/logout')
|
||||
|
||||
// 根据token获取用户地址的信息
|
||||
export const getaddress = () => requests.get('/api/user/userAddress/auth/findUserAddressList')
|
||||
|
||||
// 根据token获取订单交易页信息
|
||||
export const getordermessage = () => requests.get('/api/order/auth/trade')
|
||||
|
||||
// 用户提交订单
|
||||
export const postorder = (tradeNo, params) => requests({
|
||||
url: `/api/order/auth/submitOrder?tradeNo=${tradeNo}`,
|
||||
method: "post",
|
||||
data: params
|
||||
})
|
||||
|
||||
//根据订单号获取订单支付信息
|
||||
export const getpaymessage = (orderId) => requests.get(`/api/payment/weixin/createNative/${orderId}`)
|
||||
|
||||
|
||||
// 查询支付订单状态
|
||||
export const searchOrder = (orderId) => requests.get(`/api/payment/weixin/queryPayStatus/${orderId}`)
|
||||
|
||||
// 在个人中心获取我的订单列表
|
||||
export const getmydingdan = (page, limit) => requests.get(`/api/order/auth/${page}/${limit}`)
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import requests from "@/utils/request";
|
||||
|
||||
|
||||
// 两种写法
|
||||
// 1.axios.get("url") 对象.方法
|
||||
// 2.axios({}) 对象函数调用
|
||||
// axios({
|
||||
// url:"/api/list",
|
||||
// method:"post",
|
||||
// data:params
|
||||
// }
|
||||
|
||||
// params至少是一个空对象
|
||||
export const getsearchlist=(params)=>requests({
|
||||
url:"/api/list",
|
||||
method:"post",
|
||||
data:params
|
||||
})
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取列表操作
|
||||
// get请求携带参数要用 ,{params:{}}
|
||||
// get('/api/users',{params:{ }})
|
||||
export const getuserlist=function(){
|
||||
return request.get('/api/users')
|
||||
}
|
||||
|
||||
// 删除人员操作
|
||||
export const shanchuuserlist=function(id){
|
||||
return request.delete('/api/users/'+id)
|
||||
}
|
||||
|
||||
// 添加人员操作
|
||||
// post携带参数直接 {}
|
||||
// post('/api/users',{name:name,age:age})
|
||||
export const tianjiaernyuan=function(params){
|
||||
return request.post('/api/users',params)
|
||||
}
|
||||
|
||||
// 获取用户信息操作
|
||||
export const huoqu1yonghu=function(id){
|
||||
return request.get('/api/users/'+id)
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class="swiper-container" ref="floor1Swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" v-for="(c, cc) in list" :key="cc">
|
||||
<img :src="c.imgUrl" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 如果需要分页器 -->
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<!-- 如果需要导航按钮 -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入swiper轮播图插件
|
||||
import Swiper from "swiper";
|
||||
export default {
|
||||
name: "Carousel",
|
||||
props: ["list"],
|
||||
watch: {
|
||||
list: {
|
||||
// 监听是保证数据已经获取到,但是不保证v-for已经执行结束
|
||||
handler(oldValue, newValue) {
|
||||
this.$nextTick(() => {
|
||||
var mySwiper = new Swiper(this.$refs.floor1Swiper, {
|
||||
loop: true, // 循环模式选项
|
||||
// 如果需要分页器
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
// 点击小球切换图片
|
||||
clickable: true,
|
||||
},
|
||||
// 如果需要前进后退按钮
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
// 进入页面就立即监听
|
||||
// 因为数据是父组件传递过来的，数据早就有了，通过这个来触发
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<div class="footer">
|
||||
<div class="footer-container">
|
||||
<div class="footerList">
|
||||
<div class="footerItem">
|
||||
<h4>购物指南</h4>
|
||||
<ul class="footerItemCon">
|
||||
<li>购物流程</li>
|
||||
<li>会员介绍</li>
|
||||
<li>生活旅行/团购</li>
|
||||
<li>常见问题</li>
|
||||
<li>购物指南</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerItem">
|
||||
<h4>配送方式</h4>
|
||||
<ul class="footerItemCon">
|
||||
<li>上门自提</li>
|
||||
<li>211限时达</li>
|
||||
<li>配送服务查询</li>
|
||||
<li>配送费收取标准</li>
|
||||
<li>海外配送</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerItem">
|
||||
<h4>支付方式</h4>
|
||||
<ul class="footerItemCon">
|
||||
<li>货到付款</li>
|
||||
<li>在线支付</li>
|
||||
<li>分期付款</li>
|
||||
<li>邮局汇款</li>
|
||||
<li>公司转账</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerItem">
|
||||
<h4>售后服务</h4>
|
||||
<ul class="footerItemCon">
|
||||
<li>售后政策</li>
|
||||
<li>价格保护</li>
|
||||
<li>退款说明</li>
|
||||
<li>返修/退换货</li>
|
||||
<li>取消订单</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerItem">
|
||||
<h4>特色服务</h4>
|
||||
<ul class="footerItemCon">
|
||||
<li>夺宝岛</li>
|
||||
<li>DIY装机</li>
|
||||
<li>延保服务</li>
|
||||
<li>尚品汇E卡</li>
|
||||
<li>尚品汇通信</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerItem">
|
||||
<h4>帮助中心</h4>
|
||||
<img src="./images/wx_cz.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
<ul class="helpLink">
|
||||
<li>
|
||||
关于我们
|
||||
<span class="space"></span>
|
||||
</li>
|
||||
<li>
|
||||
联系我们
|
||||
<span class="space"></span>
|
||||
</li>
|
||||
<li>
|
||||
关于我们
|
||||
<span class="space"></span>
|
||||
</li>
|
||||
<li>
|
||||
商家入驻
|
||||
<span class="space"></span>
|
||||
</li>
|
||||
<li>
|
||||
营销中心
|
||||
<span class="space"></span>
|
||||
</li>
|
||||
<li>
|
||||
友情链接
|
||||
<span class="space"></span>
|
||||
</li>
|
||||
<li>
|
||||
关于我们
|
||||
<span class="space"></span>
|
||||
</li>
|
||||
<li>
|
||||
营销中心
|
||||
<span class="space"></span>
|
||||
</li>
|
||||
<li>
|
||||
友情链接
|
||||
<span class="space"></span>
|
||||
</li>
|
||||
<li>关于我们</li>
|
||||
</ul>
|
||||
<p>地址：最可爱最美最远最好看的地方</p>
|
||||
<p>美ICP备13672879042号</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FOOTER'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.footer {
|
||||
background-color: #eaeaea;
|
||||
.footer-container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
.footerList {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e4e1e1;
|
||||
border-top: 1px solid #e4e1e1;
|
||||
overflow: hidden;
|
||||
padding-left: 40px;
|
||||
.footerItem {
|
||||
width: 16.6666667%;
|
||||
float: left;
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.footerItemCon {
|
||||
li {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
&:last-child img {
|
||||
width: 121px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
padding: 20px;
|
||||
.helpLink {
|
||||
text-align: center;
|
||||
li {
|
||||
display: inline;
|
||||
.space {
|
||||
border-left: 1px solid #666;
|
||||
width: 1px;
|
||||
height: 13px;
|
||||
background: #666;
|
||||
margin: 8px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,182 @@
|
|||
<template>
|
||||
<div>
|
||||
<header class="header">
|
||||
<!-- 头部的第一行 -->
|
||||
<div class="top">
|
||||
<div class="container">
|
||||
<div class="loginList">
|
||||
<p>王浩霖欢迎您！</p>
|
||||
<!-- 没有用户名 -->
|
||||
<p v-if="!name">
|
||||
<span>请</span>
|
||||
<router-link to="/login" style="color: red"> 登录</router-link>
|
||||
<router-link to="/register" class="register" style="color: red">免费注册</router-link>
|
||||
</p>
|
||||
<!-- 登录成功 -->
|
||||
<p v-else>
|
||||
<span>{{ name }}</span>
|
||||
<a @click.prevent="removetoken1" style="margin-left: 12px,color: red">退出登录</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="typeList">
|
||||
<router-link to="/center" style="color: red">我的订单</router-link>
|
||||
<router-link to="/shopCart" style="color: red">我的购物车</router-link>
|
||||
<a href="###">我的尚品汇</a>
|
||||
<a href="###">尚品汇会员</a>
|
||||
<a href="###">企业采购</a>
|
||||
<a href="###">关注尚品汇</a>
|
||||
<a href="###">合作招商</a>
|
||||
<a href="###">商家后台</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--头部第二行 搜索区域-->
|
||||
<div class="bottom">
|
||||
<h1 class="logoArea">
|
||||
<router-link class="logo" title="尚品汇" to="/home">
|
||||
<img src="./images/logo.png" alt="" />
|
||||
</router-link>
|
||||
</h1>
|
||||
<div class="searchArea">
|
||||
<form action="###" class="searchForm">
|
||||
<input type="text" id="autocomplete" class="input-error input-xxlarge" v-model.trim="keyword" />
|
||||
<button class="sui-btn btn-xlarge btn-danger" type="button" @click="gosearch">搜索</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HEADER',
|
||||
data() {
|
||||
return {
|
||||
keyword: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 这里是跳转到search页面的时候,携带路由参数keyword
|
||||
gosearch() {
|
||||
// this.$router.push({ path: `/search/${this.keyword}` });
|
||||
// this.$router.push({
|
||||
// name: "search",
|
||||
// params: { keyword: this.keyword || undefined },
|
||||
// });
|
||||
let location = { name: 'search', params: { keyword: this.keyword || undefined } }
|
||||
if (this.$route.query) {
|
||||
location.query = this.$route.query
|
||||
this.$router.push(location)
|
||||
}
|
||||
},
|
||||
// 退出
|
||||
async removetoken1() {
|
||||
try {
|
||||
// 1.发起请求,通知服务器清除数据 token
|
||||
// 2.清除项目中用户信息(token,peoplemessage)
|
||||
// 3.以上步骤都在vuex中做好了
|
||||
let result = await this.$store.dispatch('removelogin')
|
||||
alert(result)
|
||||
// 退出登录后 会跳转到首页
|
||||
this.$router.push('/home')
|
||||
} catch (error) {
|
||||
alert(error.message)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 通过全局总线清除关键字
|
||||
this.$bus.$on('clear', () => {
|
||||
this.keyword = ''
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
name() {
|
||||
return this.$store.state.login.peoplemessage.name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.header {
|
||||
& > .top {
|
||||
background-color: #eaeaea;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
.container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
.loginList {
|
||||
float: left;
|
||||
p {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
.register {
|
||||
border-left: 1px solid #b3aeae;
|
||||
padding: 0 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.typeList {
|
||||
float: right;
|
||||
a {
|
||||
padding: 0 10px;
|
||||
& + a {
|
||||
border-left: 1px solid #b3aeae;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .bottom {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
.logoArea {
|
||||
float: left;
|
||||
.logo {
|
||||
img {
|
||||
width: 146px;
|
||||
margin: 14px 26px;
|
||||
border: 13px solid green;
|
||||
border-radius: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.searchArea {
|
||||
float: right;
|
||||
margin-top: 35px;
|
||||
.searchForm {
|
||||
overflow: hidden;
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
width: 490px;
|
||||
height: 32px;
|
||||
padding: 0px 4px;
|
||||
border: 2px solid #ea4a36;
|
||||
float: left;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
button {
|
||||
height: 32px;
|
||||
width: 68px;
|
||||
background-color: #ea4a36;
|
||||
border: none;
|
||||
color: #fff;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<template>
|
||||
<div class="pagination">
|
||||
<!-- 上 -->
|
||||
<!-- pageNo是当前页,父组件传递过来的数据 -->
|
||||
<button @click="beforeclick(pageNo - 1)" :disabled="pageNo == 1">上一页</button>
|
||||
|
||||
<button v-if="startendcontinues.start > 1" @click="topclick(1)">1</button>
|
||||
<button v-if="startendcontinues.start > 2">···</button>
|
||||
|
||||
<!-- 中间部分 -->
|
||||
<block v-for="(page, index) in startendcontinues.end" :key="index" name="block">
|
||||
<button v-if="page >= startendcontinues.start" @click="centerclick(page)" :class="{ active: page == pageNo }">{{ page }}</button>
|
||||
</block>
|
||||
|
||||
<!-- 下 -->
|
||||
<button v-if="startendcontinues.end < totalPage - 1">···</button>
|
||||
<button v-if="startendcontinues.end < totalPage" @click="bottomclick(totalPage)">{{ totalPage }}</button>
|
||||
|
||||
<button @click="afterclick(pageNo + 1)" :disabled="pageNo == totalPage">下一页</button>
|
||||
|
||||
<button style="margin-left: 30px">共 {{ total }} 条</button>
|
||||
<h1 class="h1">当前页<input type="text" v-model.number.lazy="pageNo1" id="input" /></h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
props: {
|
||||
pageNo: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
required: true
|
||||
},
|
||||
pagesize: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
required: true
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
required: true
|
||||
},
|
||||
continues: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageNo1: this.pageNo
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 一共多少页
|
||||
totalPage() {
|
||||
// 向上取整 总数/一页数
|
||||
return Math.ceil(this.total / this.pagesize)
|
||||
},
|
||||
// 算出当前页的起始页和结束页
|
||||
startendcontinues() {
|
||||
let start = 0
|
||||
let end = 0
|
||||
const { pageNo, continues, totalPage } = this
|
||||
// 1.非正常 连续页是5页 总页数是4页
|
||||
if (continues > totalPage) {
|
||||
start = 1
|
||||
end = totalPage
|
||||
// 正常
|
||||
} else {
|
||||
start = pageNo - parseInt(continues / 2)
|
||||
end = pageNo + parseInt(continues / 2)
|
||||
// end小于1
|
||||
if (start <= 0) {
|
||||
start = 1
|
||||
end = continues
|
||||
// end大于总页数
|
||||
} else if (end > totalPage) {
|
||||
end = totalPage
|
||||
start = totalPage - continues + 1
|
||||
}
|
||||
}
|
||||
return { start, end }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 连续的页码
|
||||
centerclick(page) {
|
||||
// console.log(page);
|
||||
this.$emit('pagechangelist', page)
|
||||
this.pageNo1 = page
|
||||
},
|
||||
// 第一页
|
||||
topclick(page) {
|
||||
// console.log(page);
|
||||
this.$emit('pagechangelist', page)
|
||||
this.pageNo1 = page
|
||||
},
|
||||
// 最后一页
|
||||
bottomclick(page) {
|
||||
// console.log(page);
|
||||
this.$emit('pagechangelist', page)
|
||||
this.pageNo1 = page
|
||||
},
|
||||
// 点击上一页
|
||||
beforeclick(page) {
|
||||
if (this.pageNo > 1) {
|
||||
this.$emit('pagechangelist', page)
|
||||
this.pageNo1 = page
|
||||
}
|
||||
},
|
||||
// 下一页
|
||||
afterclick(page) {
|
||||
if (this.pageNo < this.totalPage) {
|
||||
this.$emit('pagechangelist', page)
|
||||
this.pageNo1 = page
|
||||
}
|
||||
}
|
||||
},
|
||||
// 通过watch监听用户input输入的值
|
||||
// 1.小于1 字符串 小数 报错
|
||||
// 一旦监听得到就立马触发以下函数
|
||||
watch: {
|
||||
// isNaN检测字符串 是字符串就返回true
|
||||
pageNo1: {
|
||||
handler(newValue, oldValue) {
|
||||
const result = parseInt(newValue)
|
||||
if (isNaN(result) || result < 1) {
|
||||
alert('您输错了')
|
||||
this.pageNo1 = 1
|
||||
}
|
||||
/* indexOf检测是否有小数点 */
|
||||
// 要先转换为String才可以进行检测
|
||||
// -1找不到 >0找得到
|
||||
if (String(newValue).indexOf('.') !== -1) {
|
||||
alert('您输错了')
|
||||
// 取整数
|
||||
// this.pageNo1=parseInt(newValue)
|
||||
// 向上取整
|
||||
this.pageNo1 = Math.ceil(newValue)
|
||||
}
|
||||
this.$emit('pagechangelist', this.pageNo1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.active {
|
||||
background-color: blue;
|
||||
}
|
||||
.h1 {
|
||||
display: inline;
|
||||
margin-left: 20px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
input {
|
||||
width: 25px;
|
||||
margin-left: px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
text-align: center;
|
||||
button {
|
||||
margin: 0 5px;
|
||||
background-color: #f4f4f5;
|
||||
color: #606266;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
padding: 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
min-width: 35.5px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
|
||||
&[disabled] {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.active {
|
||||
cursor: not-allowed;
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div id="particles-js"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ParticlesJS',
|
||||
mounted() {
|
||||
require('particles.js')
|
||||
this.$nextTick(() => {
|
||||
this.initParticlesJS()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initParticlesJS() {
|
||||
particlesJS('particles-js', {
|
||||
particles: {
|
||||
number: {
|
||||
value: 150,
|
||||
density: {
|
||||
enable: true,
|
||||
value_area: 800
|
||||
}
|
||||
},
|
||||
color: {
|
||||
value: '#ffffff'
|
||||
},
|
||||
shape: {
|
||||
type: 'circle',
|
||||
stroke: {
|
||||
width: 0,
|
||||
color: '#000000'
|
||||
},
|
||||
polygon: {
|
||||
nb_sides: 5
|
||||
},
|
||||
image: {
|
||||
src: 'img/github.svg',
|
||||
width: 100,
|
||||
height: 100
|
||||
}
|
||||
},
|
||||
opacity: {
|
||||
value: 0.5,
|
||||
random: false,
|
||||
anim: {
|
||||
enable: false,
|
||||
speed: 1,
|
||||
opacity_min: 0.1,
|
||||
sync: false
|
||||
}
|
||||
},
|
||||
size: {
|
||||
value: 5,
|
||||
random: true,
|
||||
anim: {
|
||||
enable: false,
|
||||
speed: 40,
|
||||
size_min: 0.1,
|
||||
sync: false
|
||||
}
|
||||
},
|
||||
line_linked: {
|
||||
enable: true,
|
||||
distance: 150,
|
||||
color: '#ffffff',
|
||||
opacity: 0.4,
|
||||
width: 1
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 6,
|
||||
direction: 'none',
|
||||
random: false,
|
||||
straight: false,
|
||||
out_mode: 'out',
|
||||
bounce: false,
|
||||
attract: {
|
||||
enable: false,
|
||||
rotateX: 600,
|
||||
rotateY: 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
interactivity: {
|
||||
detect_on: 'canvas',
|
||||
events: {
|
||||
onhover: {
|
||||
enable: true,
|
||||
mode: 'grab'
|
||||
},
|
||||
onclick: {
|
||||
enable: true,
|
||||
mode: 'push'
|
||||
},
|
||||
resize: true
|
||||
},
|
||||
modes: {
|
||||
grab: {
|
||||
distance: 140,
|
||||
line_linked: {
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
bubble: {
|
||||
distance: 400,
|
||||
size: 40,
|
||||
duration: 2,
|
||||
opacity: 8,
|
||||
speed: 3
|
||||
},
|
||||
repulse: {
|
||||
distance: 200,
|
||||
duration: 0.4
|
||||
},
|
||||
push: {
|
||||
particles_nb: 4
|
||||
},
|
||||
remove: {
|
||||
particles_nb: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
retina_detect: true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Your styles */
|
||||
#particles-js {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 0;
|
||||
display: block;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
<template>
|
||||
<!-- 商品分类导航 -->
|
||||
<div class="type-nav">
|
||||
<div class="container">
|
||||
<div @mouseleave="leave" @mouseenter="enter">
|
||||
<h2 class="all">全部商品分类</h2>
|
||||
<!-- 三级联动 -->
|
||||
<transition name="sort">
|
||||
<div class="sort" v-show="isShow">
|
||||
<div class="all-sort-list2" @click="goSearch">
|
||||
<div class="item" v-for="(a, aaaaa) in categoryList" :key="a.categoryId">
|
||||
<h3 @mouseover="mouse(aaaaa)" :class="{ cur: currentindex == aaaaa }">
|
||||
<a :data-categoryName="a.categoryName" :data-category1Id="a.categoryId">{{ a.categoryName }}</a>
|
||||
</h3>
|
||||
<div class="item-list clearfix" :style="{ display: currentindex == aaaaa ? 'block' : 'none' }">
|
||||
<div class="subitem" v-for="(b, bbbb) in a.categoryChild" :key="b.categoryId">
|
||||
<dl class="fore">
|
||||
<dt>
|
||||
<a :data-categoryName="b.categoryName" :data-category2Id="b.categoryId">{{ b.categoryName }}</a>
|
||||
</dt>
|
||||
<dd>
|
||||
<em v-for="(c, ccc) in b.categoryChild" :key="c.categoryId">
|
||||
<a :data-categoryName="c.categoryName" :data-category3Id="c.categoryId">{{ c.categoryName }}</a>
|
||||
</em>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<nav class="nav">
|
||||
<a href="###">服装城</a>
|
||||
<a href="###">美妆馆</a>
|
||||
<a href="###">尚品汇超市</a>
|
||||
<a href="###">全球购</a>
|
||||
<a href="###">闪购</a>
|
||||
<a href="###">团购</a>
|
||||
<a href="###">有趣</a>
|
||||
<a href="###">秒杀</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import throttle from 'lodash/throttle'
|
||||
|
||||
export default {
|
||||
name: 'TypeNav',
|
||||
// 当页面DOM挂载完成之后。请求服务器
|
||||
mounted() {
|
||||
if (this.$route.path != '/home') {
|
||||
this.isShow = false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentindex: -1,
|
||||
isShow: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mouse: throttle(function (index) {
|
||||
this.currentindex = index
|
||||
// console.log(index);
|
||||
}, 50),
|
||||
// 鼠标离开事件
|
||||
leave(index) {
|
||||
this.currentindex = -1
|
||||
if (this.$route.path != '/home') {
|
||||
this.isShow = false
|
||||
}
|
||||
},
|
||||
// 鼠标经过事件
|
||||
enter() {
|
||||
if (this.$route.path != '/home') {
|
||||
this.isShow = true
|
||||
}
|
||||
},
|
||||
goSearch(event) {
|
||||
// 通过event.target.dataset获取到标签的所有属性 categoryname...这些是用户的自定义属性
|
||||
const categoryname = event.target.dataset.categoryname
|
||||
const category1id = event.target.dataset.category1id
|
||||
const category2id = event.target.dataset.category2id
|
||||
const category3id = event.target.dataset.category3id
|
||||
// 通过categoryname识别是a标签
|
||||
if (categoryname) {
|
||||
let location = { name: 'search' }
|
||||
let query = { categoryName: categoryname } //query需要传categoryname和category1Id
|
||||
// 通过category1id，category2id，category3id识别是哪一级联动
|
||||
if (category1id) {
|
||||
query.category1Id = category1id
|
||||
} else if (category2id) {
|
||||
query.category2Id = category2id
|
||||
} else {
|
||||
query.category3Id = category3id
|
||||
}
|
||||
location.query = query
|
||||
// this.Router.push({name:"search",query:{k:this.keyword.toUpperCase()}})
|
||||
console.log(location)
|
||||
if (this.$route.params) {
|
||||
location.params = this.$route.params
|
||||
this.$router.push(location)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
// 右侧是一个函数,当使用这个计算属性的时候，右侧函数会立即执行
|
||||
// 注入一个state参数.是大仓库中的数据
|
||||
categoryList: (state) => {
|
||||
// console.log(state); //home,search
|
||||
return state.home.categoryList
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cur {
|
||||
background-color: red;
|
||||
}
|
||||
.type-nav {
|
||||
border-bottom: 2px solid #e1251b;
|
||||
|
||||
.container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.all {
|
||||
width: 210px;
|
||||
height: 45px;
|
||||
background-color: #e1251b;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav {
|
||||
a {
|
||||
height: 45px;
|
||||
margin: 0 22px;
|
||||
line-height: 45px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.sort {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 45px;
|
||||
width: 210px;
|
||||
height: 461px;
|
||||
position: absolute;
|
||||
background: #fafafa;
|
||||
z-index: 999;
|
||||
|
||||
.all-sort-list2 {
|
||||
.item {
|
||||
h3 {
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.item-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 734px;
|
||||
min-height: 460px;
|
||||
_height: 200px;
|
||||
background: #f7f7f7;
|
||||
left: 210px;
|
||||
border: 1px solid #ddd;
|
||||
top: 0;
|
||||
z-index: 9999 !important;
|
||||
|
||||
.subitem {
|
||||
float: left;
|
||||
width: 650px;
|
||||
padding: 0 4px 0 8px;
|
||||
|
||||
dl {
|
||||
border-top: 1px solid #eee;
|
||||
padding: 6px 0;
|
||||
overflow: hidden;
|
||||
zoom: 1;
|
||||
|
||||
&.fore {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
float: left;
|
||||
width: 54px;
|
||||
line-height: 22px;
|
||||
text-align: right;
|
||||
padding: 3px 6px 0 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
float: left;
|
||||
width: 415px;
|
||||
padding: 3px 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
em {
|
||||
float: left;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
padding: 0 8px;
|
||||
margin-top: 5px;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.item-list {
|
||||
// display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 过渡动画样式
|
||||
// 一开始的状态(刚进入)
|
||||
.sort-enter {
|
||||
// 一开始的高度是0px
|
||||
height: 0px;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
// 进入后的动态(过渡动画结束)
|
||||
.sort-enter-to {
|
||||
// 商品分类原来的高度
|
||||
height: 461px;
|
||||
// transform: rotate(360deg);
|
||||
}
|
||||
// 定义动画时间，速率
|
||||
.sort-enter-active {
|
||||
transition: all 0.4s linear;
|
||||
// transition: all .5s ease;
|
||||
}
|
||||
|
||||
// 离开后的动画(将enter改成leave即可)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
|
||||
// 注册全局组件
|
||||
import TypeNav from "@/components/TypeNav";
|
||||
Vue.component(TypeNav.name, TypeNav);
|
||||
|
||||
import Carousel from "@/components/Carousel/Carousel.vue"
|
||||
Vue.component(Carousel.name, Carousel)
|
||||
|
||||
import Pagination from "@/components/Pagination"
|
||||
Vue.component(Pagination.name, Pagination)
|
||||
|
||||
//引入仓库啊
|
||||
import store from "@/store/index.js";
|
||||
|
||||
// 引入所有的接口文件 供全局使用 API是一个对象
|
||||
import * as API from '@/api/login.js';
|
||||
|
||||
// 按需引入element-ui弹框,表单
|
||||
import { MessageBox, Message, Form, FormItem, Input, InputNumber } from 'element-ui';
|
||||
Vue.prototype.$msgbox = MessageBox;
|
||||
Vue.prototype.$alert = MessageBox.alert;
|
||||
Vue.prototype.$message = Message;
|
||||
Vue.use(Form);
|
||||
Vue.use(FormItem);
|
||||
Vue.use(Input);
|
||||
Vue.use(InputNumber);
|
||||
|
||||
// 引入mockSever.js--mock数据
|
||||
import "@/mock/mockServer.js"
|
||||
|
||||
//引入swiper样式
|
||||
import "swiper/css/swiper.css"
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
// 引入路由组件
|
||||
import router from "@/router";
|
||||
|
||||
// 引入路由懒加载插件
|
||||
import VueLazyload from 'vue-lazyload'
|
||||
import whl from '@/assets/whl.gif' //json，图片都是对外暴露 gif是动图
|
||||
// 注册插件
|
||||
Vue.use(VueLazyload, {
|
||||
// 懒加载默认的图片
|
||||
loading: whl
|
||||
})
|
||||
|
||||
// 引入自定义指令插件
|
||||
import myPlugins from '@/plugins/myplugins'
|
||||
// {} 是传入该值
|
||||
Vue.use(myPlugins, {
|
||||
name: 'upper'
|
||||
})
|
||||
|
||||
|
||||
// 引入表单验证插件
|
||||
import '@/plugins/validate'
|
||||
new Vue({
|
||||
render: (h) => h(App),
|
||||
router,
|
||||
// 注册仓库：组件实例身上会多一个属性$store属性
|
||||
store,
|
||||
// 全局事件总线$bus配置 this指向的是Vm
|
||||
beforeCreate() {
|
||||
Vue.prototype.$bus = this
|
||||
// 给Vue原型链添加全局事件总线 所有组件都能够使用$API属性,获取接口
|
||||
Vue.prototype.$API = API
|
||||
}
|
||||
}).$mount("#app");
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
[
|
||||
{
|
||||
"id": "1",
|
||||
"imgUrl": "/images/banner1.jpg"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"imgUrl": "/images/banner2.jpg"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"imgUrl": "/images/banner3.jpg"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"imgUrl": "/images/banner4.jpg"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
[
|
||||
{
|
||||
"id": "001",
|
||||
"name": "家用电器",
|
||||
"keywords": [
|
||||
"节能补贴",
|
||||
"4K电视",
|
||||
"空气净化器",
|
||||
"IH电饭煲",
|
||||
"滚筒洗衣机",
|
||||
"电热水器"
|
||||
],
|
||||
"imgUrl": "/images/floor-1-1.png",
|
||||
"navList": [
|
||||
{
|
||||
"url": "#",
|
||||
"text": "热门"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "大家电"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "生活电器"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "厨房电器"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "应季电器"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "空气/净水"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "高端电器"
|
||||
}
|
||||
],
|
||||
"carouselList": [
|
||||
{
|
||||
"id": "0011",
|
||||
"imgUrl": "/images/floor-1-b01.png"
|
||||
},
|
||||
{
|
||||
"id": "0012",
|
||||
"imgUrl": "/images/floor-1-b02.png"
|
||||
},
|
||||
{
|
||||
"id": "0013",
|
||||
"imgUrl": "/images/floor-1-b03.png"
|
||||
}
|
||||
],
|
||||
"recommendList": [
|
||||
"/images/floor-1-2.png",
|
||||
"/images/floor-1-3.png",
|
||||
"/images/floor-1-5.png",
|
||||
"/images/floor-1-6.png"
|
||||
],
|
||||
"bigImg": "/images/floor-1-4.png"
|
||||
},
|
||||
{
|
||||
"id": "002",
|
||||
"name": "手机通讯",
|
||||
"keywords": [
|
||||
"节能补贴2",
|
||||
"4K电视2",
|
||||
"空气净化器2",
|
||||
"IH电饭煲2",
|
||||
"滚筒洗衣机2",
|
||||
"电热水器2"
|
||||
],
|
||||
"imgUrl": "/images/floor-1-1.png",
|
||||
"navList": [
|
||||
{
|
||||
"url": "#",
|
||||
"text": "热门2"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "大家电2"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "生活电器2"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "厨房电器2"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "应季电器2"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "空气/净水2"
|
||||
},
|
||||
{
|
||||
"url": "#",
|
||||
"text": "高端电器2"
|
||||
}
|
||||
],
|
||||
"carouselList": [
|
||||
{
|
||||
"id": "0011",
|
||||
"imgUrl": "/images/floor-1-b01.png"
|
||||
},
|
||||
{
|
||||
"id": "0012",
|
||||
"imgUrl": "/images/floor-1-b02.png"
|
||||
},
|
||||
{
|
||||
"id": "0013",
|
||||
"imgUrl": "/images/floor-1-b03.png"
|
||||
}
|
||||
],
|
||||
"recommendList": [
|
||||
"/images/floor-1-5.png",
|
||||
"/images/floor-1-6.png",
|
||||
"/images/floor-1-2.png",
|
||||
"/images/floor-1-3.png"
|
||||
],
|
||||
"bigImg": "/images/floor-1-4.png"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// 引入mockjs模块
|
||||
import Mock from 'mockjs'
|
||||
|
||||
// 把json数据格式引入进来 [json格式根本没有对外暴露，但是可以进入]
|
||||
// webpack默认对外暴露的:图片,JSON数据格式
|
||||
import banner from './banners.json'
|
||||
import floors from './floors.json'
|
||||
|
||||
// mock数据:请求的地址(1) 请求数据(2) data是对应json的数据
|
||||
Mock.mock("/mock/banner",{code:200,data:banner})
|
||||
Mock.mock("/mock/floors",{code:200,data:floors})
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<div class="cart-complete-wrap">
|
||||
<div class="cart-complete">
|
||||
<h3><i class="sui-icon icon-pc-right"></i>商品已成功加入购物车！</h3>
|
||||
<div class="goods">
|
||||
<div class="left-good">
|
||||
<div class="left-pic">
|
||||
<img :src="objresult.skuDefaultImg">
|
||||
</div>
|
||||
<div class="right-info">
|
||||
<p class="title">{{objresult.skuName}}</p>
|
||||
<p class="attr">{{objresult.skuDesc}} 数量:{{shopnum}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-gocart">
|
||||
<!-- 跳转到商品详情页面 detail 注意携带id 因为接口是根据id来展示不同的产品 -->
|
||||
<!--:to="`/detail/${objresult.id}`" hash地址直接跳转 -->
|
||||
<!-- 记住params是router路由定义的(要符合要求) query是自己定义的 怎么样都行 -->
|
||||
<!-- params和query一样可以请求接口的数据,通过this.$route获取参数即可 -->
|
||||
<router-link class="sui-btn btn-xlarge" :to="{name:'detail',params:{detailid:objresult.id}}">查看商品详情</router-link>
|
||||
<!-- ""和''要配合使用 不能同时使用相同 -->
|
||||
<router-link :to="{name:'shopCart'}">去购物车结算 > </router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AddCartSuccess',
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
objresult(){
|
||||
// 获取会话存储中的数据 将字符串转换为对象
|
||||
return JSON.parse(sessionStorage.getItem("SKUINFO"))
|
||||
},
|
||||
shopnum(){
|
||||
return this.$route.query.shopnum
|
||||
}
|
||||
},
|
||||
// mounted(){
|
||||
// // 获取会话存储中的数据
|
||||
// let result=sessionStorage.getItem("SKUINFO")
|
||||
// // 将字符串转换为对象
|
||||
// this.objresult=JSON.parse(result)
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cart-complete-wrap {
|
||||
background-color: #f4f4f4;
|
||||
|
||||
.cart-complete {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #6aaf04;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
margin: 0;
|
||||
|
||||
.icon-pc-right {
|
||||
background-color: #fff;
|
||||
border: 2px solid #6aaf04;
|
||||
padding: 3px;
|
||||
margin-right: 8px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.goods {
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
|
||||
.left-good {
|
||||
float: left;
|
||||
|
||||
.left-pic {
|
||||
border: 1px solid #dfdfdf;
|
||||
width: 60px;
|
||||
float: left;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-info {
|
||||
color: #444;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
line-height: 28px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.attr {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-gocart {
|
||||
float: right;
|
||||
|
||||
a {
|
||||
padding: 7px 36px;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: #333;
|
||||
background-color: #eee;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
a:active {
|
||||
background-color: #e1e1e1;
|
||||
border: 1px solid #d5d5d5;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #e1251b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: #e1251b;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 219 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -0,0 +1,438 @@
|
|||
<template>
|
||||
<div class="order-right">
|
||||
<div class="order-content">
|
||||
<div class="title">
|
||||
<h3>团购订单</h3>
|
||||
</div>
|
||||
<div class="chosetype">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="29%">商品</th>
|
||||
<th width="31%">订单详情</th>
|
||||
<th width="13%">收货人</th>
|
||||
<th>金额</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="orders">
|
||||
<table class="order-item">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="5">
|
||||
<span class="ordertitle"
|
||||
>2017-02-11 11:59 订单编号：7867473872181848 <span class="pull-right delete"><img src="./images/delete.png" /></span
|
||||
></span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="60%">
|
||||
<div class="typographic">
|
||||
<img src="./images/goods.png" />
|
||||
<a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
|
||||
<span>x1</span>
|
||||
<a href="#" class="service">售后申请</a>
|
||||
</div>
|
||||
</td>
|
||||
<td rowspan="2" width="8%" class="center">小丽</td>
|
||||
<td rowspan="2" width="13%" class="center">
|
||||
<ul class="unstyled">
|
||||
<li>总金额¥138.00</li>
|
||||
<li>在线支付</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td rowspan="2" width="8%" class="center">
|
||||
<a href="#" class="btn">已完成 </a>
|
||||
</td>
|
||||
<td rowspan="2" width="13%" class="center">
|
||||
<ul class="unstyled">
|
||||
<li>
|
||||
<a href="mycomment.html" target="_blank">评价|晒单</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%">
|
||||
<div class="typographic">
|
||||
<img src="./images/goods.png" />
|
||||
<a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
|
||||
<span>x1</span>
|
||||
<a href="#" class="service">售后申请</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="order-item">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="5">
|
||||
<span class="ordertitle"
|
||||
>2017-02-11 11:59 订单编号：7867473872181848 <span class="pull-right delete"><img src="./images/delete.png" /></span
|
||||
></span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="60%">
|
||||
<div class="typographic">
|
||||
<img src="./images/goods.png" />
|
||||
<a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
|
||||
<span>x1</span>
|
||||
<a href="#" class="service">售后申请</a>
|
||||
</div>
|
||||
</td>
|
||||
<td rowspan="2" width="8%" class="center">小丽</td>
|
||||
<td rowspan="2" width="13%" class="center">
|
||||
<ul class="unstyled">
|
||||
<li>总金额¥138.00</li>
|
||||
<li>在线支付</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td rowspan="2" width="8%" class="center">
|
||||
<a href="#" class="btn">已完成 </a>
|
||||
</td>
|
||||
<td rowspan="2" width="13%" class="center">
|
||||
<ul class="unstyled">
|
||||
<li>
|
||||
<a href="mycomment.html" target="_blank">评价|晒单</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%">
|
||||
<div class="typographic">
|
||||
<img src="./images/goods.png" />
|
||||
<a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
|
||||
<span>x1</span>
|
||||
<a href="#" class="service">售后申请</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="choose-order">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="prev disabled">
|
||||
<a href="javascript:">«上一页</a>
|
||||
</li>
|
||||
<li class="page actived">
|
||||
<a href="javascript:">1</a>
|
||||
</li>
|
||||
<li class="page">
|
||||
<a href="javascript:">2</a>
|
||||
</li>
|
||||
<li class="page">
|
||||
<a href="javascript:">3</a>
|
||||
</li>
|
||||
<li class="page">
|
||||
<a href="javascript:">4</a>
|
||||
</li>
|
||||
|
||||
<li class="next disabled">
|
||||
<a href="javascript:">下一页»</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<span> 共2页 </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--猜你喜欢-->
|
||||
<div class="like">
|
||||
<h4 class="kt">猜你喜欢</h4>
|
||||
<ul class="like-list">
|
||||
<li class="likeItem">
|
||||
<div class="p-img">
|
||||
<img src="./images/itemlike01.png" />
|
||||
</div>
|
||||
<div class="attr">
|
||||
<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
|
||||
</div>
|
||||
<div class="price">
|
||||
<em>¥</em>
|
||||
<i>3699.00</i>
|
||||
</div>
|
||||
<div class="commit">已有6人评价</div>
|
||||
</li>
|
||||
<li class="likeItem">
|
||||
<div class="p-img">
|
||||
<img src="./images/itemlike02.png" />
|
||||
</div>
|
||||
<div class="attr">Apple苹果iPhone 6s/6s Plus 16G 64G 128G</div>
|
||||
<div class="price">
|
||||
<em>¥</em>
|
||||
<i>4388.00</i>
|
||||
</div>
|
||||
<div class="commit">已有700人评价</div>
|
||||
</li>
|
||||
<li class="likeItem">
|
||||
<div class="p-img">
|
||||
<img src="./images/itemlike03.png" />
|
||||
</div>
|
||||
<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
|
||||
<div class="price">
|
||||
<em>¥</em>
|
||||
<i>4088.00</i>
|
||||
</div>
|
||||
<div class="commit">已有700人评价</div>
|
||||
</li>
|
||||
<li class="likeItem">
|
||||
<div class="p-img">
|
||||
<img src="./images/itemlike04.png" />
|
||||
</div>
|
||||
<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
|
||||
<div class="price">
|
||||
<em>¥</em>
|
||||
<i>4088.00</i>
|
||||
</div>
|
||||
<div class="commit">已有700人评价</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
//右边
|
||||
.order-right {
|
||||
float: right;
|
||||
width: 83.33%;
|
||||
|
||||
//订单部分
|
||||
.order-content {
|
||||
margin: 0 20px;
|
||||
color: #666;
|
||||
|
||||
//标题
|
||||
.title {
|
||||
margin-bottom: 22px;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
h3 {
|
||||
padding: 12px 10px;
|
||||
font-size: 15px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
||||
//表头
|
||||
.chosetype {
|
||||
margin-bottom: 15px;
|
||||
color: #666;
|
||||
|
||||
table {
|
||||
border: 1px solid #e6e6e6;
|
||||
border-collapse: separate;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-spacing: 0;
|
||||
|
||||
th {
|
||||
padding: 6px 8px;
|
||||
color: #666;
|
||||
font-weight: 700;
|
||||
vertical-align: bottom;
|
||||
background-color: #f4f4f4;
|
||||
line-height: 18px;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表单内容
|
||||
.orders {
|
||||
font-size: 12px;
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
color: #4cb9fc;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #e6e6e6;
|
||||
border-collapse: collapse;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
margin-bottom: 18px;
|
||||
max-width: 100%;
|
||||
|
||||
th {
|
||||
padding: 6px 8px;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
background-color: #f4f4f4;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
padding: 6px 8px;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #e6e6e6;
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.typographic {
|
||||
img {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
float: left;
|
||||
min-width: 80px;
|
||||
max-width: 250px;
|
||||
color: #e1251b;
|
||||
|
||||
&.service {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
float: left;
|
||||
min-width: 80px;
|
||||
max-width: 250px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分页
|
||||
.choose-order {
|
||||
.pagination {
|
||||
margin: 38px 0;
|
||||
|
||||
ul {
|
||||
font-size: 0;
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 4px 9px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #e0e9ee;
|
||||
|
||||
&.prev,
|
||||
&.next {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
&.prev {
|
||||
border-right-color: #28a3ef;
|
||||
}
|
||||
|
||||
&.page {
|
||||
border-color: #28a3ef;
|
||||
border-left: 0;
|
||||
|
||||
&.actived {
|
||||
background-color: #28a3ef;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 猜你喜欢
|
||||
.like {
|
||||
border: 1px solid #ddd;
|
||||
margin: 15px 20px;
|
||||
|
||||
.kt {
|
||||
border-bottom: 1px solid #ddd;
|
||||
background: #f1f1f1;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.like-list {
|
||||
padding: 15px 11px;
|
||||
overflow: hidden;
|
||||
|
||||
.likeItem {
|
||||
width: 25%;
|
||||
float: left;
|
||||
|
||||
.p-img {
|
||||
text-align: left;
|
||||
|
||||
img {
|
||||
width: 167px;
|
||||
height: 123px;
|
||||
}
|
||||
}
|
||||
|
||||
.attr {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding: 0 15px;
|
||||
font-size: 16px;
|
||||
color: #c81623;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.commit {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 219 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<div class="order-main">
|
||||
<div class="container">
|
||||
<div class="order-body">
|
||||
<!--左侧列表-->
|
||||
<div class="order-left">
|
||||
<dl>
|
||||
<dt><i>·</i> 订单中心</dt>
|
||||
<dd @click="tiaozhuan1">我的订单</dd>
|
||||
<dd @click="tiaozhuan2">团购订单</dd>
|
||||
<dd>本地生活订单</dd>
|
||||
<dd>我的预售</dd>
|
||||
<dd>评价晒单</dd>
|
||||
<dd>取消订单记录</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><i>·</i> 关注中心</dt>
|
||||
<dd>关注的商品</dd>
|
||||
<dd>关注的店铺</dd>
|
||||
<dd>关注的专辑</dd>
|
||||
<dd>关注的品牌</dd>
|
||||
<dd>关注的活动</dd>
|
||||
<dd>浏览历史</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><i>·</i> 特色业务</dt>
|
||||
<dd>我的营业厅</dd>
|
||||
<dd>京东通信</dd>
|
||||
<dd>定期送</dd>
|
||||
<dd>京东代下单</dd>
|
||||
<dd>我的回收单</dd>
|
||||
<dd>节能补贴</dd>
|
||||
<dd>医药服务</dd>
|
||||
<dd>流量加油站</dd>
|
||||
<dd>黄金托管</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><i>·</i> 客户服务</dt>
|
||||
<dd>返修退换货</dd>
|
||||
<dd>价格保护</dd>
|
||||
<dd>意见建议</dd>
|
||||
<dd>购买咨询</dd>
|
||||
<dd>交易纠纷</dd>
|
||||
<dd>我的发票</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><i>·</i> 设置</dt>
|
||||
<dd>个人信息</dd>
|
||||
<dd>收货地址</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<!-- 右侧内容 -->
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
methods: {
|
||||
tiaozhuan1() {
|
||||
this.$router.push('/center/myOrder')
|
||||
},
|
||||
tiaozhuan2() {
|
||||
this.$router.push('/center/groupOrder')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.order-main {
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 1200px;
|
||||
|
||||
.order-body {
|
||||
padding: 10px;
|
||||
color: #333;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
//左边
|
||||
.order-left {
|
||||
float: left;
|
||||
width: 16.67%;
|
||||
|
||||
dl {
|
||||
line-height: 28px;
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
padding: 5px;
|
||||
|
||||
i {
|
||||
color: #77b72c;
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 6px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 219 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -0,0 +1,388 @@
|
|||
<template>
|
||||
<div class="order-right">
|
||||
<div class="order-content">
|
||||
<div class="title">
|
||||
<h3>我的订单</h3>
|
||||
</div>
|
||||
<div class="chosetype">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="29%">商品</th>
|
||||
<th width="31%">订单详情</th>
|
||||
<th width="13%">收货人</th>
|
||||
<th>金额</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="orders">
|
||||
<!-- 每一笔订单 -->
|
||||
<table class="order-item" v-for="(item, index) in dingdanmessage.records" :key="index">
|
||||
<thead>
|
||||
<!-- 头部 -->
|
||||
<tr>
|
||||
<th colspan="5">
|
||||
<span class="ordertitle"
|
||||
>{{ item.expireTime }} 订单编号：{{ item.outTradeNo }} <span class="pull-right delete"><img src="./images/delete.png" /></span
|
||||
></span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 每笔订单商品 -->
|
||||
<tr v-for="(a, i) in item.orderDetailList" :key="i">
|
||||
<td width="60%">
|
||||
<div class="typographic">
|
||||
<img :src="a.imgUrl" />
|
||||
<a href="#" class="block-text">{{ a.skuName }}</a>
|
||||
<span>x{{ a.skuNum }}</span>
|
||||
<a href="#" class="service">售后申请</a>
|
||||
</div>
|
||||
</td>
|
||||
<!-- 1.根据商品的数量合并上下单元格 -->
|
||||
<!-- 2.并显示1次:根据索引来只显示一次 -->
|
||||
<td :rowspan="item.orderDetailList.length" width="8%" class="center" v-if="i == 0">{{ item.consignee }}</td>
|
||||
<td :rowspan="item.orderDetailList.length" width="13%" class="center" v-if="i == 0">
|
||||
<ul class="unstyled">
|
||||
<li>总金额¥{{ item.totalAmount }}.00</li>
|
||||
<li>在线支付</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td :rowspan="item.orderDetailList.length" width="8%" class="center" v-if="i == 0">
|
||||
<a href="#" class="btn">{{ item.orderStatusName }} </a>
|
||||
</td>
|
||||
<td :rowspan="item.orderDetailList.length" width="13%" class="center" v-if="i == 0">
|
||||
<ul class="unstyled">
|
||||
<li>
|
||||
<a href="mycomment.html" target="_blank">评价|晒单</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="choose-order">
|
||||
<!-- 分页 -->
|
||||
<!-- 父传子当前显示第几页 -->
|
||||
<Pagination :pageNo="page" :pagesize="limit" :total="dingdanmessage.total" :continues="5" @pagechangelist="pagechangelist"></Pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!--猜你喜欢-->
|
||||
<div class="like">
|
||||
<h4 class="kt">猜你喜欢</h4>
|
||||
<ul class="like-list">
|
||||
<li class="likeItem">
|
||||
<div class="p-img">
|
||||
<img src="./images/itemlike01.png" />
|
||||
</div>
|
||||
<div class="attr">
|
||||
<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
|
||||
</div>
|
||||
<div class="price">
|
||||
<em>¥</em>
|
||||
<i>3699.00</i>
|
||||
</div>
|
||||
<div class="commit">已有6人评价</div>
|
||||
</li>
|
||||
<li class="likeItem">
|
||||
<div class="p-img">
|
||||
<img src="./images/itemlike02.png" />
|
||||
</div>
|
||||
<div class="attr">Apple苹果iPhone 6s/6s Plus 16G 64G 128G</div>
|
||||
<div class="price">
|
||||
<em>¥</em>
|
||||
<i>4388.00</i>
|
||||
</div>
|
||||
<div class="commit">已有700人评价</div>
|
||||
</li>
|
||||
<li class="likeItem">
|
||||
<div class="p-img">
|
||||
<img src="./images/itemlike03.png" />
|
||||
</div>
|
||||
<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
|
||||
<div class="price">
|
||||
<em>¥</em>
|
||||
<i>4088.00</i>
|
||||
</div>
|
||||
<div class="commit">已有700人评价</div>
|
||||
</li>
|
||||
<li class="likeItem">
|
||||
<div class="p-img">
|
||||
<img src="./images/itemlike04.png" />
|
||||
</div>
|
||||
<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
|
||||
<div class="price">
|
||||
<em>¥</em>
|
||||
<i>4088.00</i>
|
||||
</div>
|
||||
<div class="commit">已有700人评价</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 当前第几页
|
||||
page: 1,
|
||||
// 每一页展示的数据
|
||||
limit: 3
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
dingdanmessage: (state) => {
|
||||
return state.mydingdan.dingdanmessage || {}
|
||||
}
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('getmydingdan', { page: this.page, limit: this.limit })
|
||||
},
|
||||
methods: {
|
||||
// 获取当前点击的那一页
|
||||
pagechangelist(page) {
|
||||
this.page = page
|
||||
this.$store.dispatch('getmydingdan', { page: this.page, limit: this.limit })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
//右边
|
||||
.order-right {
|
||||
float: right;
|
||||
width: 83.33%;
|
||||
|
||||
//订单部分
|
||||
.order-content {
|
||||
margin: 0 20px;
|
||||
color: #666;
|
||||
|
||||
//标题
|
||||
.title {
|
||||
margin-bottom: 22px;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
h3 {
|
||||
padding: 12px 10px;
|
||||
font-size: 15px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
||||
//表头
|
||||
.chosetype {
|
||||
margin-bottom: 15px;
|
||||
color: #666;
|
||||
|
||||
table {
|
||||
border: 1px solid #e6e6e6;
|
||||
border-collapse: separate;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-spacing: 0;
|
||||
|
||||
th {
|
||||
padding: 6px 8px;
|
||||
color: #666;
|
||||
font-weight: 700;
|
||||
vertical-align: bottom;
|
||||
background-color: #f4f4f4;
|
||||
line-height: 18px;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表单内容
|
||||
.orders {
|
||||
font-size: 12px;
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
color: #4cb9fc;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #e6e6e6;
|
||||
border-collapse: collapse;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
margin-bottom: 18px;
|
||||
max-width: 100%;
|
||||
|
||||
th {
|
||||
padding: 6px 8px;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
background-color: #f4f4f4;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
padding: 6px 8px;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #e6e6e6;
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.typographic {
|
||||
img {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
a {
|
||||
float: left;
|
||||
min-width: 80px;
|
||||
max-width: 250px;
|
||||
color: #e1251b;
|
||||
|
||||
&.service {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
float: left;
|
||||
min-width: 80px;
|
||||
max-width: 250px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分页
|
||||
.choose-order {
|
||||
.pagination {
|
||||
margin: 38px 0;
|
||||
|
||||
ul {
|
||||
font-size: 0;
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 4px 9px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #e0e9ee;
|
||||
|
||||
&.prev,
|
||||
&.next {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
&.prev {
|
||||
border-right-color: #28a3ef;
|
||||
}
|
||||
|
||||
&.page {
|
||||
border-color: #28a3ef;
|
||||
border-left: 0;
|
||||
|
||||
&.actived {
|
||||
background-color: #28a3ef;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 猜你喜欢
|
||||
.like {
|
||||
border: 1px solid #ddd;
|
||||
margin: 15px 20px;
|
||||
|
||||
.kt {
|
||||
border-bottom: 1px solid #ddd;
|
||||
background: #f1f1f1;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.like-list {
|
||||
padding: 15px 11px;
|
||||
overflow: hidden;
|
||||
|
||||
.likeItem {
|
||||
width: 25%;
|
||||
float: left;
|
||||
|
||||
.p-img {
|
||||
text-align: left;
|
||||
|
||||
img {
|
||||
width: 167px;
|
||||
height: 123px;
|
||||
}
|
||||
}
|
||||
|
||||
.attr {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding: 0 15px;
|
||||
font-size: 16px;
|
||||
color: #c81623;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.commit {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<div class="swiper-container" ref="imageSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" v-for="(item, index) in skuImageList" :key="index" >
|
||||
<!-- 你要给图片加边框 就要在图片上绑定啊啊啊啊 看清楚 -->
|
||||
<img :src="item.imgUrl" :class="{active:index==currentindex}" @click="changeactive(index)"/>
|
||||
<!-- <img :src="item.imgUrl" alt=""> -->
|
||||
<!-- ../images/s1.png -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Swiper from 'swiper'
|
||||
export default {
|
||||
name: 'ImageList',
|
||||
props: ['skuImageList'],
|
||||
data() {
|
||||
return {
|
||||
currentindex:0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
skuImageList: {
|
||||
// 监听数据 可以保证数据一定ok 但是不能保证v-for遍历结构
|
||||
handler(newVal, oldVal) {
|
||||
// 确保数据回来的时候,立即触发这个回调函数
|
||||
// 推迟下个DOM更新进行 保证cb操作最新的DOM
|
||||
this.$nextTick(() => {
|
||||
// ref代替DOM API
|
||||
// 定义ref="abc" 使用this.$refs.abc
|
||||
new Swiper(this.$refs.imageSwiper, {
|
||||
// 显示三个
|
||||
slidesPerView: 3,
|
||||
// 一次切换一个
|
||||
slidesPerGroup:1,
|
||||
// 如果需要前进后退按钮
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
changeactive(e){
|
||||
// console.log(e);
|
||||
this.currentindex=e
|
||||
// 通知兄弟组件,当前的索引值为几,进行展示数据
|
||||
this.$bus.$emit("changeindex",this.currentindex)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.swiper-container {
|
||||
height: 56px;
|
||||
width: 412px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 12px;
|
||||
|
||||
.swiper-slide {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
.active{
|
||||
border: 2px solid #f60;
|
||||
padding: 1px;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
|
||||
// &.active {
|
||||
// border: 2px solid #f60;
|
||||
// padding: 1px;
|
||||
// }
|
||||
|
||||
// &的意思是:上一层样式 .img:hover
|
||||
// &:hover {
|
||||
// border: 2px solid #f60;
|
||||
// padding: 1px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
box-sizing: border-box;
|
||||
width: 12px;
|
||||
height: 56px;
|
||||
background: rgb(235, 235, 235);
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
&::after {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div class="spec-preview">
|
||||
<!-- <img :src="Objimg.imgUrl" /> -->
|
||||
<!-- ../images/s1.png -->
|
||||
<!-- 小图片 -->
|
||||
<img :src="Objimg.imgUrl" alt="" ref="smallimg" />
|
||||
|
||||
<!-- 写逻辑事件的地方 -->
|
||||
<!-- css样式是图片大小即可拉 z-index放在前 并是绝对定位-->
|
||||
<div class="event" @mousemove="maskyidong"></div>
|
||||
|
||||
<!-- 大图片 -->
|
||||
<div class="big" ref="bigbox">
|
||||
<!-- <img :src="Objimg.imgUrl" /> -->
|
||||
<img :src="Objimg.imgUrl" alt="" ref="bigimg" />
|
||||
</div>
|
||||
|
||||
<!-- 绿色遮罩层 -->
|
||||
<div class="mask" ref="maxk"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Zoom',
|
||||
props: ['skuImageList'],
|
||||
methods: {
|
||||
maskyidong(e) {
|
||||
console.log(e.offsetX,e.pageX);
|
||||
let mask = this.$refs.maxk
|
||||
let smallimg = this.$refs.smallimg
|
||||
let bigimg = this.$refs.bigimg
|
||||
let bigbox = this.$refs.bigbox
|
||||
// 鼠标在盒子内的坐标
|
||||
let maskX = e.offsetX - mask.offsetWidth / 2
|
||||
let maskY = e.offsetY - mask.offsetHeight / 2
|
||||
if (maskX <= 0) {
|
||||
maskX = 0
|
||||
}
|
||||
if (maskX >= smallimg.offsetWidth - mask.offsetWidth) {
|
||||
maskX = smallimg.offsetWidth - mask.offsetWidth
|
||||
}
|
||||
if (maskY <= 0) {
|
||||
maskY = 0
|
||||
}
|
||||
if (maskY >= smallimg.offsetHeight - mask.offsetHeight) {
|
||||
maskY = smallimg.offsetHeight - mask.offsetHeight
|
||||
}
|
||||
mask.style.left = maskX + 'px'
|
||||
mask.style.top = maskY + 'px'
|
||||
|
||||
// 大图片跟着移动 是成比例关系的
|
||||
// 大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
|
||||
let imgUrlMax = bigimg.offsetWidth - bigbox.offsetWidth //大图片最大移动距离
|
||||
let MaskMax = smallimg.offsetWidth - mask.offsetWidth
|
||||
let imgUrlyidongX = -(maskX * imgUrlMax) / MaskMax + 'px'
|
||||
let imgUrlyidongY = -(maskY * imgUrlMax) / MaskMax + 'px'
|
||||
bigimg.style.left=imgUrlyidongX
|
||||
bigimg.style.top=imgUrlyidongY
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 默认展示第一张
|
||||
currentindex: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
Objimg() {
|
||||
// 一旦this.currentindex就会重新进行计算
|
||||
return this.skuImageList[this.currentindex] || []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 接收兄弟组件的索引,根据索引来展示图片
|
||||
// 因为imageList遍历的是全部图片
|
||||
// Zoom默认显示的是第一张
|
||||
this.$bus.$on('changeindex', (index) => {
|
||||
console.log(index)
|
||||
// 修改data
|
||||
this.currentindex = index
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.spec-preview {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.event {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.mask {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background-color: rgba(0, 255, 0, 0.3);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.big {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 100%;
|
||||
border: 1px solid #aaa;
|
||||
overflow: hidden;
|
||||
z-index: 998;
|
||||
display: none;
|
||||
background: white;
|
||||
|
||||
img {
|
||||
width: 200%;
|
||||
max-width: 200%;
|
||||
height: 200%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.event:hover ~ .mask,
|
||||
.event:hover ~ .big {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -0,0 +1,907 @@
|
|||
<template>
|
||||
<div class="detail">
|
||||
<!-- 商品分类导航 -->
|
||||
<TypeNav />
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<section class="con">
|
||||
<!-- 导航路径区域 -->
|
||||
<div class="conPoin">
|
||||
<span v-show="categoryView.category1Name">{{ categoryView.category1Name }}</span>
|
||||
<span v-show="categoryView.category2Name">{{ categoryView.category2Name }}</span>
|
||||
<span v-show="categoryView.category3Name">{{ categoryView.category3Name }}</span>
|
||||
</div>
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="mainCon">
|
||||
<!-- 左侧放大镜区域 -->
|
||||
<div class="previewWrap">
|
||||
<!--放大镜效果-->
|
||||
<Zoom :skuImageList="Objimg" />
|
||||
<!-- 小图列表 -->
|
||||
<ImageList :skuImageList="Objimg" />
|
||||
</div>
|
||||
<!-- 右侧选择区域布局 -->
|
||||
<div class="InfoWrap">
|
||||
<div class="goodsDetail">
|
||||
<h3 class="InfoName">{{ skuInfo.skuDesc }}</h3>
|
||||
<p class="news">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
|
||||
<div class="priceArea">
|
||||
<div class="priceArea1">
|
||||
<div class="title">价 格</div>
|
||||
<div class="price">
|
||||
<i>¥</i>
|
||||
<em>{{ skuInfo.price }}</em>
|
||||
<span>降价通知</span>
|
||||
</div>
|
||||
<div class="remark">
|
||||
<i>累计评价</i>
|
||||
<em>65545</em>
|
||||
</div>
|
||||
</div>
|
||||
<div class="priceArea2">
|
||||
<div class="title">
|
||||
<i>促 销</i>
|
||||
</div>
|
||||
<div class="fixWidth">
|
||||
<i class="red-bg">加价购</i>
|
||||
<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="support">
|
||||
<div class="supportArea">
|
||||
<div class="title">支 持</div>
|
||||
<div class="fixWidth">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</div>
|
||||
</div>
|
||||
<div class="supportArea">
|
||||
<div class="title">配 送 至</div>
|
||||
<div class="fixWidth">广东省 深圳市 宝安区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="choose">
|
||||
<div class="chooseArea">
|
||||
<div class="choosed"></div>
|
||||
<dl v-for="(item, index) in spuSaleAttrList" :key="index">
|
||||
<dt class="title">{{ item.saleAttrName }}</dt>
|
||||
<dd changepirce="0" :class="{ active: a.isChecked == 1 }" v-for="(a, i) in item.spuSaleAttrValueList" :key="i" @click="changeActive(a, item.spuSaleAttrValueList)">
|
||||
{{ a.saleAttrValueName }}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="cartWrap">
|
||||
<div class="controls">
|
||||
<input autocomplete="off" class="itxt" v-model.number.lazy="shopnum" />
|
||||
<a href="javascript:" class="plus" @click="add">+</a>
|
||||
<a href="javascript:" class="mins" @click="jian">-</a>
|
||||
</div>
|
||||
<div class="add">
|
||||
<a @click="addshop">加入购物车</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 内容详情页 -->
|
||||
<section class="product-detail">
|
||||
<aside class="aside">
|
||||
<div class="tabWraped">
|
||||
<h4 class="active">相关分类</h4>
|
||||
<h4>推荐品牌</h4>
|
||||
</div>
|
||||
<div class="tabContent">
|
||||
<div class="tab-pane active">
|
||||
<ul class="partList">
|
||||
<li>手机</li>
|
||||
<li>手机壳</li>
|
||||
<li>内存卡</li>
|
||||
<li>Iphone配件</li>
|
||||
<li>贴膜</li>
|
||||
<li>手机耳机</li>
|
||||
<li>移动电源</li>
|
||||
<li>平板电脑</li>
|
||||
</ul>
|
||||
<ul class="goodsList">
|
||||
<li>
|
||||
<div class="list-wrap">
|
||||
<div class="p-img">
|
||||
<img src="./images/part01.png" />
|
||||
</div>
|
||||
<div class="attr">Apple苹果iPhone 6s (A1699)</div>
|
||||
<div class="price">
|
||||
<em>¥</em>
|
||||
<i>6088.00</i>
|
||||
</div>
|
||||
<div class="operate">
|
||||
<a href="javascript:void(0);">加入购物车</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="list-wrap">
|
||||
<div class="p-img">
|
||||
<img src="./images/part02.png" />
|
||||
</div>
|
||||
<div class="attr">
|
||||
<em>Apple苹果iPhone 6s (A1699)</em>
|
||||
</div>
|
||||
<div class="price">
|
||||
<strong>
|
||||
<em>¥</em>
|
||||
<i>6088.00</i>
|
||||
</strong>
|
||||
</div>
|
||||
<div class="operate">
|
||||
<a href="javascript:void(0);">加入购物车</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="list-wrap">
|
||||
<div class="p-img">
|
||||
<img src="./images/part03.png" />
|
||||
</div>
|
||||
<div class="attr">
|
||||
<em>Apple苹果iPhone 6s (A1699)</em>
|
||||
</div>
|
||||
<div class="price">
|
||||
<strong>
|
||||
<em>¥</em>
|
||||
<i>6088.00</i>
|
||||
</strong>
|
||||
</div>
|
||||
<div class="operate">
|
||||
<a href="javascript:void(0);">加入购物车</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="list-wrap">
|
||||
<div class="p-img">
|
||||
<img src="./images/part02.png" />
|
||||
</div>
|
||||
<div class="attr">
|
||||
<em>Apple苹果iPhone 6s (A1699)</em>
|
||||
</div>
|
||||
<div class="price">
|
||||
<strong>
|
||||
<em>¥</em>
|
||||
<i>6088.00</i>
|
||||
</strong>
|
||||
</div>
|
||||
<div class="operate">
|
||||
<a href="javascript:void(0);">加入购物车</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="list-wrap">
|
||||
<div class="p-img">
|
||||
<img src="./images/part03.png" />
|
||||
</div>
|
||||
<div class="attr">
|
||||
<em>Apple苹果iPhone 6s (A1699)</em>
|
||||
</div>
|
||||
<div class="price">
|
||||
<strong>
|
||||
<em>¥</em>
|
||||
<i>6088.00</i>
|
||||
</strong>
|
||||
</div>
|
||||
<div class="operate">
|
||||
<a href="javascript:void(0);">加入购物车</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
<p>推荐品牌</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="detail">
|
||||
<div class="fitting">
|
||||
<h4 class="kt">选择搭配</h4>
|
||||
<div class="good-suits">
|
||||
<div class="master">
|
||||
<img src="./images/l-m01.png" />
|
||||
<p>￥5299</p>
|
||||
<i>+</i>
|
||||
</div>
|
||||
<ul class="suits">
|
||||
<li class="suitsItem">
|
||||
<img src="./images/dp01.png" />
|
||||
<p>Feless费勒斯VR</p>
|
||||
<label>
|
||||
<input type="checkbox" value="39" />
|
||||
<span>39</span>
|
||||
</label>
|
||||
</li>
|
||||
<li class="suitsItem">
|
||||
<img src="./images/dp02.png" />
|
||||
<p>Feless费勒斯VR</p>
|
||||
<label>
|
||||
<input type="checkbox" value="50" />
|
||||
<span>50</span>
|
||||
</label>
|
||||
</li>
|
||||
<li class="suitsItem">
|
||||
<img src="./images/dp03.png" />
|
||||
<p>Feless费勒斯VR</p>
|
||||
<label>
|
||||
<input type="checkbox" value="59" />
|
||||
<span>59</span>
|
||||
</label>
|
||||
</li>
|
||||
<li class="suitsItem">
|
||||
<img src="./images/dp04.png" />
|
||||
<p>Feless费勒斯VR</p>
|
||||
<label>
|
||||
<input type="checkbox" value="99" />
|
||||
<span>99</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="result">
|
||||
<div class="num">已选购0件商品</div>
|
||||
<div class="price-tit">套餐价</div>
|
||||
<div class="price">￥5299</div>
|
||||
<button class="addshopcar">加入购物车</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<ul class="tab-wraped">
|
||||
<li class="active">
|
||||
<a href="###"> 商品介绍 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="###"> 规格与包装 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="###"> 售后保障 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="###"> 商品评价 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="###"> 手机社区 </a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div id="one" class="tab-pane active">
|
||||
<ul class="goods-intro">
|
||||
<li>分辨率：1920*1080(FHD)</li>
|
||||
<li>后置摄像头：1200万像素</li>
|
||||
<li>前置摄像头：500万像素</li>
|
||||
<li>核 数：其他</li>
|
||||
<li>频 率：以官网信息为准</li>
|
||||
<li>品牌： Apple</li>
|
||||
<li>商品名称：APPLEiPhone 6s Plus</li>
|
||||
<li>商品编号：1861098</li>
|
||||
<li>商品毛重：0.51kg</li>
|
||||
<li>商品产地：中国大陆</li>
|
||||
<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
|
||||
<li>系统：苹果（IOS）</li>
|
||||
<li>像素：1000-1600万</li>
|
||||
<li>机身内存：64GB</li>
|
||||
</ul>
|
||||
<div class="intro-detail">
|
||||
<img src="./images/intro01.png" />
|
||||
<img src="./images/intro02.png" />
|
||||
<img src="./images/intro03.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="two" class="tab-pane">
|
||||
<p>规格与包装</p>
|
||||
</div>
|
||||
<div id="three" class="tab-pane">
|
||||
<p>售后保障</p>
|
||||
</div>
|
||||
<div id="four" class="tab-pane">
|
||||
<p>商品评价</p>
|
||||
</div>
|
||||
<div id="five" class="tab-pane">
|
||||
<p>手机社区</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImageList from './ImageList/ImageList'
|
||||
import Zoom from './Zoom/Zoom'
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
name: 'Detail',
|
||||
methods: {
|
||||
// 修改被选中项不需要发起ajax请求
|
||||
// 等加入购物车的时候才需要
|
||||
changeActive(select, totalxiongdi) {
|
||||
// 这里使用到了排他思想
|
||||
// 遍历把全部变为0
|
||||
for (let i = 0; i < totalxiongdi.length; i++) {
|
||||
totalxiongdi[i].isChecked = 0
|
||||
}
|
||||
// 自己再变为1
|
||||
select.isChecked = 1
|
||||
},
|
||||
add() {
|
||||
this.shopnum++
|
||||
},
|
||||
jian() {
|
||||
if (this.shopnum > 1) {
|
||||
this.shopnum--
|
||||
}
|
||||
},
|
||||
// 组件要知道添加成功还是失败
|
||||
// this.$store.dispatch('addOrUpdateShopCart') 调用addOrUpdateShopCart函数
|
||||
// 该addOrUpdateShopCart函数用async定义,async执行返回的结果一定是Promise
|
||||
// 有和失败
|
||||
async addshop() {
|
||||
try {
|
||||
let result=await this.$store.dispatch('addOrUpdateShopCart', { skuId: this.$route.params.detailid, skuNum: this.shopnum })
|
||||
console.log(result)
|
||||
|
||||
// 跳转到添加购物车成功的界面
|
||||
|
||||
// 产品信息数据复杂 使用会话存储 并非持久化
|
||||
// 本地存储和会话存储都不能存储对象 用JSON.stringify转换为字符串
|
||||
sessionStorage.setItem("SKUINFO",JSON.stringify(this.skuInfo))
|
||||
this.$router.push({name:"addcartsuccess",query:{shopnum:this.shopnum}}) //只携带数量 (简单)
|
||||
} catch (error) {
|
||||
alert(error.message)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['categoryView', 'skuInfo', 'spuSaleAttrList']),
|
||||
// 父传子的时候至少传递给数据一个空数组
|
||||
Objimg() {
|
||||
return this.skuInfo.skuImageList || []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ImageList,
|
||||
Zoom
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shopnum: 2
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$route.params.detailid)
|
||||
// 派发cartion获取产品详情的信息
|
||||
this.$store.dispatch('getdetaillist', this.$route.params.detailid)
|
||||
},
|
||||
watch: {
|
||||
// 一旦用户失去焦点后才会被监听
|
||||
shopnum: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal)
|
||||
const result = parseInt(newVal)
|
||||
if (newVal < 1) {
|
||||
alert('您输错了')
|
||||
this.shopnum = 1
|
||||
}
|
||||
// 通过isNaN判断是不是字符串 如果是就返回true
|
||||
// 就执行以下代码
|
||||
if (isNaN(newVal)) {
|
||||
alert('您输错了')
|
||||
this.shopnum = 1
|
||||
}
|
||||
// 小数点
|
||||
// =-1找不到
|
||||
if (String(newVal).indexOf('.') != -1) {
|
||||
alert('您输错了')
|
||||
this.shopnum = result
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.detail {
|
||||
.con {
|
||||
width: 1200px;
|
||||
margin: 15px auto 0;
|
||||
|
||||
.conPoin {
|
||||
padding: 9px 15px 9px 0;
|
||||
|
||||
& > span + span:before {
|
||||
content: '/\00a0';
|
||||
padding: 0 5px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.mainCon {
|
||||
overflow: hidden;
|
||||
margin: 5px 0 15px;
|
||||
|
||||
.previewWrap {
|
||||
float: left;
|
||||
width: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.InfoWrap {
|
||||
width: 700px;
|
||||
float: right;
|
||||
|
||||
.InfoName {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.news {
|
||||
color: #e12228;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.priceArea {
|
||||
background: #fee9eb;
|
||||
padding: 7px;
|
||||
margin: 13px 0;
|
||||
|
||||
.priceArea1 {
|
||||
overflow: hidden;
|
||||
line-height: 28px;
|
||||
margin-top: 10px;
|
||||
|
||||
.title {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.price {
|
||||
float: left;
|
||||
color: #c81623;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
em {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.remark {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.priceArea2 {
|
||||
overflow: hidden;
|
||||
line-height: 28px;
|
||||
margin-top: 10px;
|
||||
|
||||
.title {
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fixWidth {
|
||||
width: 520px;
|
||||
float: left;
|
||||
|
||||
.red-bg {
|
||||
background: #c81623;
|
||||
color: #fff;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.t-gray {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.support {
|
||||
border-bottom: 1px solid #ededed;
|
||||
padding-bottom: 5px;
|
||||
|
||||
.supportArea {
|
||||
overflow: hidden;
|
||||
line-height: 28px;
|
||||
margin-top: 10px;
|
||||
|
||||
.title {
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fixWidth {
|
||||
width: 520px;
|
||||
float: left;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choose {
|
||||
.chooseArea {
|
||||
overflow: hidden;
|
||||
line-height: 28px;
|
||||
margin-top: 10px;
|
||||
|
||||
dl {
|
||||
overflow: hidden;
|
||||
margin: 13px 0;
|
||||
|
||||
dt {
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
dd {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
color: #666;
|
||||
line-height: 24px;
|
||||
padding: 2px 14px;
|
||||
border-top: 1px solid #eee;
|
||||
border-right: 1px solid #bbb;
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-left: 1px solid #eee;
|
||||
|
||||
&.active {
|
||||
color: green;
|
||||
border: 1px solid green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cartWrap {
|
||||
.controls {
|
||||
width: 48px;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
|
||||
.itxt {
|
||||
width: 38px;
|
||||
height: 37px;
|
||||
border: 1px solid #ddd;
|
||||
color: #555;
|
||||
float: left;
|
||||
border-right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.plus,
|
||||
.mins {
|
||||
width: 15px;
|
||||
text-align: center;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
background: #f1f1f1;
|
||||
color: #666;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.mins {
|
||||
right: -8px;
|
||||
top: 19px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.plus {
|
||||
right: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
float: left;
|
||||
|
||||
a {
|
||||
background-color: #e1251b;
|
||||
padding: 0 25px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-detail {
|
||||
width: 1200px;
|
||||
margin: 30px auto 0;
|
||||
overflow: hidden;
|
||||
|
||||
.aside {
|
||||
width: 210px;
|
||||
float: left;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
.tabWraped {
|
||||
height: 40px;
|
||||
|
||||
h4 {
|
||||
border-top: 3px solid #fff;
|
||||
float: left;
|
||||
line-height: 37px;
|
||||
width: 105px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
&.active {
|
||||
border-top: 3px solid #e1251b;
|
||||
border-bottom: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabContent {
|
||||
padding: 10px;
|
||||
|
||||
.tab-pane {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
.partList {
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
width: 50%;
|
||||
float: left;
|
||||
border-bottom: 1px dashed #ededed;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.goodsList {
|
||||
& > li {
|
||||
margin: 5px 0 15px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
padding-bottom: 5px;
|
||||
|
||||
.list-wrap {
|
||||
.p-img {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 152px;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 16px;
|
||||
color: #c81623;
|
||||
}
|
||||
|
||||
.operate {
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
border: 1px solid #8c8c8c;
|
||||
color: #8c8c8c;
|
||||
display: inline-block;
|
||||
padding: 2px 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
width: 980px;
|
||||
float: right;
|
||||
|
||||
.fitting {
|
||||
border: 1px solid #ddd;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.kt {
|
||||
border-bottom: 1px solid #ddd;
|
||||
background: #f1f1f1;
|
||||
color: #333;
|
||||
padding: 5px 0 5px 15px;
|
||||
}
|
||||
|
||||
.good-suits {
|
||||
height: 170px;
|
||||
padding-top: 10px;
|
||||
|
||||
.master {
|
||||
width: 127px;
|
||||
height: 165px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
img {
|
||||
width: 87px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #c81623;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: -25px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.suits {
|
||||
width: 668px;
|
||||
height: 165px;
|
||||
float: left;
|
||||
|
||||
.suitsItem {
|
||||
float: left;
|
||||
width: 127px;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 120px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result {
|
||||
border-left: 1px solid #ddd;
|
||||
width: 153px;
|
||||
height: 165px;
|
||||
padding-left: 20px;
|
||||
float: left;
|
||||
|
||||
.num {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.price-tit {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #b1191a;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.addshopcar {
|
||||
background-color: #e1251b;
|
||||
border: 1px solid #e1251b;
|
||||
padding: 10px 25px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intro {
|
||||
.tab-wraped {
|
||||
background: #ededed;
|
||||
// border: 1px solid #ddd;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
|
||||
& + li > a {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
// border: 0;
|
||||
background: #e1251b;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 11px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
background: #fcfcfc;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
.tab-pane {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
.goods-intro {
|
||||
padding-left: 10px;
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-detail {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue