好久没更新了
This commit is contained in:
23
vuenew/cli/demo/.gitignore
vendored
Normal file
23
vuenew/cli/demo/.gitignore
vendored
Normal file
@@ -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?
|
||||
24
vuenew/cli/demo/README.md
Normal file
24
vuenew/cli/demo/README.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# demo
|
||||
|
||||
## Project setup
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
yarn serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
yarn lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
5
vuenew/cli/demo/babel.config.js
Normal file
5
vuenew/cli/demo/babel.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
47
vuenew/cli/demo/package.json
Normal file
47
vuenew/cli/demo/package.json
Normal file
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "demo",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"core-js": "^3.6.5",
|
||||
"element-ui": "^2.15.1",
|
||||
"qs": "^6.9.6",
|
||||
"vue": "^2.6.11",
|
||||
"vue-axios": "^3.2.4",
|
||||
"vue-router": "^3.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
BIN
vuenew/cli/demo/public/favicon.ico
Normal file
BIN
vuenew/cli/demo/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
vuenew/cli/demo/public/index.html
Normal file
17
vuenew/cli/demo/public/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!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">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
17
vuenew/cli/demo/src/App.vue
Normal file
17
vuenew/cli/demo/src/App.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
BIN
vuenew/cli/demo/src/assets/static/img/clothes.jpg
Normal file
BIN
vuenew/cli/demo/src/assets/static/img/clothes.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
93
vuenew/cli/demo/src/components/bottomjiesuan.vue
Normal file
93
vuenew/cli/demo/src/components/bottomjiesuan.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="bottom-jiesuan">
|
||||
<div class="js-right">
|
||||
<div class="js-right-right">
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" >全选</el-checkbox>
|
||||
<a href="">删除</a>
|
||||
<a href="">移入收藏夹</a>
|
||||
<a href="">分享</a>
|
||||
</div>
|
||||
<div class="js-right-left">
|
||||
<p>已选商品<span>{{sumnum}}</span>件</p>
|
||||
<p>合计（不含运费）：<span>{{sumprice.toFixed(2)}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="js-left">
|
||||
<p>结算</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'bottomjiesuan',
|
||||
props:{
|
||||
sumnum:Number,
|
||||
sumprice:Number
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bottom-jiesuan{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0px;
|
||||
margin: 0 auto ;
|
||||
background-color: #e5e5e5;
|
||||
width: 98%;
|
||||
height: 40px;
|
||||
}
|
||||
.js-right{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
width: 90%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.js-right a{
|
||||
margin-left: 30px;
|
||||
color: black;
|
||||
}
|
||||
.js-right a:hover{
|
||||
color: #e2231a;
|
||||
}
|
||||
.js-right-left{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
.js-right-left p{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.js-right-left span{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #e2231a;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.js-left p{
|
||||
/* margin-right: 20px; */
|
||||
line-height:18px ;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
margin: auto 0;
|
||||
margin-top: 12px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.js-left{
|
||||
background-color: #B0B0B0;
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
141
vuenew/cli/demo/src/components/gouwuchelist - 副本.vue
Normal file
141
vuenew/cli/demo/src/components/gouwuchelist - 副本.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
|
||||
<div class="gouwuchelist">
|
||||
|
||||
<div class="row1">
|
||||
<el-checkbox :label="checkeddianpu" @click="childClick"></el-checkbox>
|
||||
<svg t="1616141748140" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2334" width="16" height="16"><path d="M761.9 927.6H264.1c-70.5 0-125.7-42.6-125.7-97V550.9c0-24.3 19.7-44 44-44s44 19.7 44 44v277.2c3.5 3.7 16.4 11.5 37.7 11.5H762c21.3 0 34.2-7.7 37.7-11.5V550.9c0-24.3 19.7-44 44-44s44 19.7 44 44v279.7c-0.1 54.4-55.3 97-125.8 97z" fill="#e2231a" p-id="2335"></path><path d="M513.7 633.7c-11.1 0-22.1-1.5-32.9-4.6l-181.2-52.2c-2.6-0.8-5.3-1.1-7.9-0.9l-129.3 8.2c-24.6 1.6-48.7-8.7-65.7-28.2C77 533.6 68.9 501.7 75 470.9l52.2-261.6c13-65 63-110.4 121.6-110.4h528.4c58.6 0 108.6 45.4 121.6 110.4L951 470.9c6.1 30.8-2 62.6-21.7 85.2-17 19.5-41.1 29.8-65.7 28.2l-129.4-8.2c-2.7-0.2-5.3 0.1-7.9 0.9l-179.4 52c-10.9 3.1-22.1 4.7-33.2 4.7zM293.2 488c10.4 0 20.7 1.5 30.7 4.4l181.2 52.1c5.7 1.6 11.5 1.6 17.2 0l179.4-52c12.4-3.6 25.2-5 38-4.2l124.5 7.9c0.7-1.8 1.2-4.5 0.5-8l-52.2-261.6c-4.6-23-19.4-39.7-35.3-39.7H248.8c-15.9 0-30.7 16.7-35.3 39.7l-52.2 261.6c-0.7 3.5-0.1 6.2 0.5 8l124.3-7.9c2.4-0.2 4.7-0.3 7.1-0.3z m576 8.5h0.2-0.2z" fill="#e2231a" p-id="2336"></path><path d="M513.7 447.6c-24.3 0-44-19.7-44-44V293.5c0-24.3 19.7-44 44-44s44 19.7 44 44v110.2c0 24.2-19.7 43.9-44 43.9zM702.9 422.7c-20.9 0-39.5-15-43.3-36.3l-15.2-85.2c-4.3-23.9 11.7-46.8 35.6-51 24.1-4.3 46.8 11.7 51 35.6l15.2 85.2c4.3 23.9-11.7 46.8-35.6 51-2.6 0.4-5.2 0.7-7.7 0.7zM319.8 422.7c-2.5 0-5.1-0.2-7.6-0.7-24-4.2-39.9-27-35.8-50.9l14.9-85.2c4.2-23.9 27-39.9 50.9-35.8 24 4.2 39.9 27 35.8 50.9l-14.9 85.2c-3.7 21.4-22.3 36.5-43.3 36.5z" fill="#e2231a" p-id="2337"></path></svg>
|
||||
<span>店铺：</span>
|
||||
<a href="">{{shangpin.dianpuname}}</a>
|
||||
</div>
|
||||
<div class="gwc-content">
|
||||
<div class="tuhejieshao">
|
||||
<el-checkbox :label="checkeddingdan" ></el-checkbox>
|
||||
<img src="..\assets\static\img\clothes.jpg" alt="">
|
||||
<p>{{shangpin.shangpinname}}</p>
|
||||
</div>
|
||||
<div class="canshu">
|
||||
<p v-for="(casnhu,index) in shangpin.canshulist" :key="index">{{casnhu.canshuname}}：{{casnhu.canshuvalue}}</p>
|
||||
<svg style="display:none" t="1616146720956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3457" width="16" height="16"><path d="M369.269 883.675l-321.935 91.337 91.335-321.938z" p-id="3458" fill="#9c9c9c"></path><path d="M1000.772 252.109l-77.526 77.526-230.598-230.598 77.522-77.524c0 0 36.951-36.895 74.509 0.663 37.562 37.563 110.575 110.574 151.709 151.71 41.138 41.134 4.385 78.223 4.385 78.223z" p-id="3459" fill="#9c9c9c"></path><path d="M900.035 352.787l-507.821 507.821-230.54-230.54 507.821-507.821 230.54 230.54z" p-id="3460" fill="#9c9c9c"></path></svg>
|
||||
</div>
|
||||
<div class="danjia">
|
||||
<p>￥{{(shangpin.yuanjia).toFixed(2)}}</p>
|
||||
<p>￥{{(shangpin.xianjia).toFixed(2)}}</p>
|
||||
</div>
|
||||
<div class="shuliang">
|
||||
<el-input-number size="mini" v-model="shangpin.num4" :min="1" @change="handleChange"></el-input-number>
|
||||
</div>
|
||||
<div class="jine">
|
||||
<!-- <span>￥{{(shangpin.xianjia*shangpin.num4).toFixed(2)}}</span> -->
|
||||
|
||||
<span>￥{{(shangpin.xianjia,shangpin.num4)}}</span>
|
||||
</div>
|
||||
<div class="caozuo">
|
||||
<a href="">移入收藏夹</a>
|
||||
<a href="">删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'gouwuchelist',
|
||||
props:{
|
||||
shangpin:Object
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
childClick(e){
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.gouwuchelist .row1{
|
||||
padding: 10px 30px;
|
||||
|
||||
}
|
||||
.gouwuchelist .row1 svg{
|
||||
margin: 0px 5px 0 15px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
.gouwuchelist .row1 span,a{
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.gwc-content {
|
||||
padding:20px 0 20px 0;
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #fcfcfc;
|
||||
border:1px solid #e7e7e7; ;
|
||||
}
|
||||
.gwc-content .tuhejieshao p{
|
||||
width: 160px;
|
||||
overflow: hidden;
|
||||
height: 31px;
|
||||
font-size: 12.5px;
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.gwc-content .tuhejieshao img{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.gwc-content .tuhejieshao{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.gwc-content .canshu{
|
||||
font-size: 13px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.gwc-content .danjia p:first-child{
|
||||
font-size: 12px;
|
||||
text-decoration: line-through;
|
||||
color: darkgray;
|
||||
}
|
||||
.gwc-content .danjia p:last-child{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.gwc-content .caozuo a{
|
||||
display: block;
|
||||
/* text-decoration: none; */
|
||||
color: black;
|
||||
}
|
||||
.gwc-content .caozuo a:hover{
|
||||
text-decoration: #e2231a;
|
||||
color: #e2231a;
|
||||
}
|
||||
.gwc-content .jine{
|
||||
color: #e2231a;
|
||||
font-weight:bold;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.gwc-content .shuliang{
|
||||
margin-left: -20px;
|
||||
}
|
||||
</style>
|
||||
204
vuenew/cli/demo/src/components/gouwuchelist.vue
Normal file
204
vuenew/cli/demo/src/components/gouwuchelist.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="gouwuchelist">
|
||||
<div class="row1">
|
||||
<!-- <el-checkbox :label="checkeddianpu" @click="childClick"></el-checkbox> -->
|
||||
<svg
|
||||
t="1616141748140"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2334"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M761.9 927.6H264.1c-70.5 0-125.7-42.6-125.7-97V550.9c0-24.3 19.7-44 44-44s44 19.7 44 44v277.2c3.5 3.7 16.4 11.5 37.7 11.5H762c21.3 0 34.2-7.7 37.7-11.5V550.9c0-24.3 19.7-44 44-44s44 19.7 44 44v279.7c-0.1 54.4-55.3 97-125.8 97z"
|
||||
fill="#e2231a"
|
||||
p-id="2335"
|
||||
></path>
|
||||
<path
|
||||
d="M513.7 633.7c-11.1 0-22.1-1.5-32.9-4.6l-181.2-52.2c-2.6-0.8-5.3-1.1-7.9-0.9l-129.3 8.2c-24.6 1.6-48.7-8.7-65.7-28.2C77 533.6 68.9 501.7 75 470.9l52.2-261.6c13-65 63-110.4 121.6-110.4h528.4c58.6 0 108.6 45.4 121.6 110.4L951 470.9c6.1 30.8-2 62.6-21.7 85.2-17 19.5-41.1 29.8-65.7 28.2l-129.4-8.2c-2.7-0.2-5.3 0.1-7.9 0.9l-179.4 52c-10.9 3.1-22.1 4.7-33.2 4.7zM293.2 488c10.4 0 20.7 1.5 30.7 4.4l181.2 52.1c5.7 1.6 11.5 1.6 17.2 0l179.4-52c12.4-3.6 25.2-5 38-4.2l124.5 7.9c0.7-1.8 1.2-4.5 0.5-8l-52.2-261.6c-4.6-23-19.4-39.7-35.3-39.7H248.8c-15.9 0-30.7 16.7-35.3 39.7l-52.2 261.6c-0.7 3.5-0.1 6.2 0.5 8l124.3-7.9c2.4-0.2 4.7-0.3 7.1-0.3z m576 8.5h0.2-0.2z"
|
||||
fill="#e2231a"
|
||||
p-id="2336"
|
||||
></path>
|
||||
<path
|
||||
d="M513.7 447.6c-24.3 0-44-19.7-44-44V293.5c0-24.3 19.7-44 44-44s44 19.7 44 44v110.2c0 24.2-19.7 43.9-44 43.9zM702.9 422.7c-20.9 0-39.5-15-43.3-36.3l-15.2-85.2c-4.3-23.9 11.7-46.8 35.6-51 24.1-4.3 46.8 11.7 51 35.6l15.2 85.2c4.3 23.9-11.7 46.8-35.6 51-2.6 0.4-5.2 0.7-7.7 0.7zM319.8 422.7c-2.5 0-5.1-0.2-7.6-0.7-24-4.2-39.9-27-35.8-50.9l14.9-85.2c4.2-23.9 27-39.9 50.9-35.8 24 4.2 39.9 27 35.8 50.9l-14.9 85.2c-3.7 21.4-22.3 36.5-43.3 36.5z"
|
||||
fill="#e2231a"
|
||||
p-id="2337"
|
||||
></path>
|
||||
</svg>
|
||||
<span>店铺：</span>
|
||||
<a href="">{{ shangpin.dianpuname }}</a>
|
||||
</div>
|
||||
<div class="gwc-content">
|
||||
<div class="tuhejieshao">
|
||||
<el-checkbox :label="shangpin.xianjia" @change="xz(shangpin.xianjia)">
|
||||
<img src="..\assets\static\img\clothes.jpg" alt="" />
|
||||
<p>{{ shangpin.shangpinname }}</p>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<div class="canshu">
|
||||
<p v-for="(casnhu, index) in shangpin.canshulist" :key="index">
|
||||
{{ casnhu.canshuname }}：{{ casnhu.canshuvalue }}
|
||||
</p>
|
||||
<svg
|
||||
style="display: none"
|
||||
t="1616146720956"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3457"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M369.269 883.675l-321.935 91.337 91.335-321.938z"
|
||||
p-id="3458"
|
||||
fill="#9c9c9c"
|
||||
></path>
|
||||
<path
|
||||
d="M1000.772 252.109l-77.526 77.526-230.598-230.598 77.522-77.524c0 0 36.951-36.895 74.509 0.663 37.562 37.563 110.575 110.574 151.709 151.71 41.138 41.134 4.385 78.223 4.385 78.223z"
|
||||
p-id="3459"
|
||||
fill="#9c9c9c"
|
||||
></path>
|
||||
<path
|
||||
d="M900.035 352.787l-507.821 507.821-230.54-230.54 507.821-507.821 230.54 230.54z"
|
||||
p-id="3460"
|
||||
fill="#9c9c9c"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="danjia">
|
||||
<p>￥{{ shangpin.yuanjia.toFixed(2) }}</p>
|
||||
<p>￥{{ shangpin.xianjia.toFixed(2) }}</p>
|
||||
</div>
|
||||
<div class="shuliang">
|
||||
<el-input-number
|
||||
size="mini"
|
||||
v-model="shangpin.num4"
|
||||
:min="1"
|
||||
@change="handleChange"
|
||||
></el-input-number>
|
||||
</div>
|
||||
<div class="jine">
|
||||
<!-- <span>￥{{(shangpin.xianjia*shangpin.num4).toFixed(2)}}</span> -->
|
||||
|
||||
<span>￥{{ (shangpin.xianjia, shangpin.num4) }}</span>
|
||||
</div>
|
||||
<div class="caozuo">
|
||||
<a href="">移入收藏夹</a>
|
||||
<a href="">删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "gouwuchelist",
|
||||
props: {
|
||||
shangpin: Object,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
childClick(e) {
|
||||
console.log(e);
|
||||
},
|
||||
xz(e){
|
||||
if(e){
|
||||
this.$emit("xz",e)
|
||||
}
|
||||
|
||||
}
|
||||
// selectone(value) {
|
||||
// console.log(value)
|
||||
// // let checkedCount = value.length;
|
||||
// // this.checkAll = checkedCount === this.cities.length;
|
||||
// // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.gouwuchelist .row1 {
|
||||
padding: 10px 30px;
|
||||
}
|
||||
.gouwuchelist .row1 svg {
|
||||
margin: 0px 5px 0 15px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
.gouwuchelist .row1 span,
|
||||
a {
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.gwc-content {
|
||||
padding: 20px 0 20px 0;
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #e7e7e7;
|
||||
}
|
||||
.gwc-content .tuhejieshao p {
|
||||
width: 160px;
|
||||
overflow: hidden;
|
||||
height: 31px;
|
||||
font-size: 12.5px;
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.gwc-content .tuhejieshao img {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.gwc-content .tuhejieshao {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.gwc-content .canshu {
|
||||
font-size: 13px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.gwc-content .danjia p:first-child {
|
||||
font-size: 12px;
|
||||
text-decoration: line-through;
|
||||
color: darkgray;
|
||||
}
|
||||
.gwc-content .danjia p:last-child {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.gwc-content .caozuo a {
|
||||
display: block;
|
||||
/* text-decoration: none; */
|
||||
color: black;
|
||||
}
|
||||
.gwc-content .caozuo a:hover {
|
||||
text-decoration: #e2231a;
|
||||
color: #e2231a;
|
||||
}
|
||||
.gwc-content .jine {
|
||||
color: #e2231a;
|
||||
font-weight: bold;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.gwc-content .shuliang {
|
||||
margin-left: -20px;
|
||||
}
|
||||
</style>
|
||||
196
vuenew/cli/demo/src/components/navbar1.vue
Normal file
196
vuenew/cli/demo/src/components/navbar1.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<div class="search-m">
|
||||
<div class="search-logo">
|
||||
<a href="" class="search_logo_lk"></a>
|
||||
<span>{{logopangzi}}</span>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<!-- <div class="search_bg" >枣夹核桃</div> -->
|
||||
<input type="text" class="text" label="搜索" >
|
||||
<svg t="1616050698526" class="icon-xiangji" viewBox="0 0 1164 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2753" width="16" height="16"><path d="M959.326316 377.263158m-64.673684 0a64.673684 64.673684 0 1 0 129.347368 0 64.673684 64.673684 0 1 0-129.347368 0Z" fill="#9f9f9f" p-id="2754"></path><path d="M1099.452632 1024H64.673684a64.673684 64.673684 0 0 1-64.673684-64.673684V226.357895a64.673684 64.673684 0 0 1 64.673684-64.673684h275.941053S433.249011 0 463.494737 0h237.136842c32.983579 0 116.412632 161.684211 116.412632 161.684211H1099.452632a64.673684 64.673684 0 0 1 64.673684 64.673684v732.968421a64.673684 64.673684 0 0 1-64.673684 64.673684zM668.294737 64.673684H495.831579c-18.248758 0-70.063158 97.010526-70.063158 97.010527H732.968421s-45.023663-97.010526-64.673684-97.010527z m431.157895 204.8a43.115789 43.115789 0 0 0-43.11579-43.115789H107.789474a43.115789 43.115789 0 0 0-43.11579 43.115789v646.736842a43.115789 43.115789 0 0 0 43.11579 43.11579h948.547368a43.115789 43.115789 0 0 0 43.11579-43.11579V269.473684zM926.989474 388.042105a64.673684 64.673684 0 1 1 64.673684-64.673684 64.673684 64.673684 0 0 1-64.673684 64.673684zM587.452632 797.642105A199.410526 199.410526 0 1 1 786.863158 598.231579 199.410526 199.410526 0 0 1 587.452632 797.642105z m0-344.926316A145.515789 145.515789 0 1 0 732.968421 598.231579 145.515789 145.515789 0 0 0 587.452632 452.715789z" p-id="2755" fill="#9f9f9f"></path></svg>
|
||||
<button class="button" label="搜索">
|
||||
<svg t="1616049602935" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1391" width="16" height="16"><path d="M1007.548064 899.256487L801.043871 692.754294c-3.577986-3.577986-8.032969-5.329979-12.194952-8.032969C908.82345 515.091988 893.926508 279.233909 742.042101 127.349503c-169.701337-169.775337-444.918262-169.775337-614.692598 0-169.775337 169.701337-169.775337 444.845262 0 614.692598 153.5634 153.5644 392.635466 166.708349 562.701801 42.498834 2.701989 3.869985 4.380983 8.104968 7.73997 11.536955L904.296468 1002.582084c28.624888 28.551888 74.773708 28.551888 103.252596 0 28.477889-28.623888 28.477889-74.846708 0-103.324597zM655.074441 654.927442c-121.653525 121.654525-318.884754 121.654525-440.611279 0-121.653525-121.652525-121.653525-318.956754 0-440.610279s318.884754-121.653525 440.611279 0c121.726525 121.726525 121.726525 318.957754 0 440.611279z" p-id="1392" fill="#ffffff"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="gouwuche">
|
||||
<div class="cw-icon">
|
||||
<svg t="1616051372800" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3934" width="16" height="16"><path d="M332.8 790.528q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM758.784 792.576q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM930.816 210.944q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.84t-38.4 14.336l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-12.288l103.424 0q20.48 0 32.768 6.144t19.456 15.36 10.24 18.944 5.12 16.896q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM892.928 302.08l-641.024-2.048 35.84 185.344 535.552 1.024z" p-id="3935" fill="#f10214"></path></svg>
|
||||
<a target="_blank" href="//cart.jd.com/cart.action">我的购物车</a>
|
||||
<i class="ci-count" id="shopping-amount">{{gouwuchenum}}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login">
|
||||
<a href=""></a>
|
||||
<p>{{loginmsg}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'navbar1',
|
||||
props:{
|
||||
logopangzi:String,
|
||||
gouwuchenum:Number,
|
||||
loginmsg:String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.search{
|
||||
/* position: fixed; */
|
||||
z-index: 100;
|
||||
/* left: 0;
|
||||
top: 0; */
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #f10214;
|
||||
background-color: #fff;
|
||||
}
|
||||
.search-m{
|
||||
height: 50px;
|
||||
width: 80%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin:0 auto ;
|
||||
}
|
||||
.search-m .search-logo{
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
width: 125px;
|
||||
height: 40px;
|
||||
}
|
||||
.search-m .search-logo span{
|
||||
color: #e2231a;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
top: -33px;
|
||||
left: 115px;
|
||||
|
||||
}
|
||||
.search-m .search_logo_lk {
|
||||
background-image: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/header/sprite.png);
|
||||
background-position: 0 -120px;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 125px;
|
||||
height: 40px;
|
||||
text-indent: -999px;
|
||||
}
|
||||
.search-m .search-box{
|
||||
position: absolute;
|
||||
height: 32px;
|
||||
border: 2px solid #e2231a;
|
||||
background: #fff;
|
||||
width: 486px;
|
||||
left: 220px;
|
||||
top: 8px;
|
||||
}
|
||||
.search-m .search-box .button:hover{
|
||||
background-color: #bd1108;
|
||||
}
|
||||
.search-m .search-box .button{
|
||||
border-radius: 0;
|
||||
right: 0;
|
||||
width: 58px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border: none;
|
||||
background-color: #e1251b;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.search-m .text {
|
||||
left: 0;
|
||||
padding: 2px 44px 2px 17px;
|
||||
width: 330px;
|
||||
height: 26px;
|
||||
border: none;
|
||||
line-height: 26px;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
outline: none;
|
||||
}
|
||||
/* .search-m .search_bg {
|
||||
color: #989898;
|
||||
} */
|
||||
.search-m .icon-xiangji{
|
||||
margin-bottom: -4px
|
||||
}
|
||||
.search-m .gouwuche .cw-icon:hover{
|
||||
border-color: #e1251b;
|
||||
}
|
||||
.search-m .gouwuche .cw-icon{
|
||||
width: 130px;
|
||||
height: 34px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
border-color: #eee;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
top: 8px;
|
||||
left: 71%;
|
||||
border: 1px solid #e3e4e5;
|
||||
}
|
||||
.search-m .gouwuche .cw-icon a{
|
||||
color: #e1251b;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 49px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.search-m .cw-icon .ci-count {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 29px;
|
||||
right: auto;
|
||||
display: inline-block;
|
||||
padding: 1px 3px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
color: #fff;
|
||||
background-color: #e1251b;
|
||||
border-radius: 7px;
|
||||
min-width: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.search-m .cw-icon svg{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 18px;
|
||||
}
|
||||
.search-m .login:hover{
|
||||
background-color: #bd1108;
|
||||
}
|
||||
.search-m .login{
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
background-color: #e1251b;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
border-color: #e1251b;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 8px;
|
||||
left: 85%;
|
||||
}
|
||||
</style>
|
||||
71
vuenew/cli/demo/src/components/shangpin - 副本.vue
Normal file
71
vuenew/cli/demo/src/components/shangpin - 副本.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
|
||||
<div class="shangpin">
|
||||
|
||||
<img class="spimg" src="//img12.360buyimg.com/jdcms/s150x150_jfs/t1/159091/6/13582/351629/60515ec7Eae162e4d/5fbdf654ea0fd7cc.jpg.webp" alt="美国（G-force）无链条折叠电动车外卖代驾成人电动自行车迷你轴传动电瓶车闪电发货 深空灰-汽车电芯无链条传动技术-6AH60公里">
|
||||
<div class="box">
|
||||
<p class="jianjie">
|
||||
美国（G-force）无链条折叠电动车外卖代驾成人电动自行车迷你轴传动电瓶车闪电发货 深空灰-汽车电芯无链条传动技术-6AH60公里
|
||||
</p>
|
||||
<div class="price">
|
||||
<i>¥</i>
|
||||
<span class="zheng">2998.<span class="ling">00</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'shangpin'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.shangpin{
|
||||
width: 190px;
|
||||
height: 266px;
|
||||
margin: 0 5px 8px;
|
||||
background: #fff;
|
||||
}
|
||||
.shangpin .spimg{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 30px 0 0 28px;
|
||||
}
|
||||
.shangpin .jianjie{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
height: 40px;
|
||||
}
|
||||
.shangpin .box{
|
||||
margin: 30px 15px 0 15px;
|
||||
}
|
||||
.shangpin .box .price{
|
||||
color: #e1251b;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
.shangpin .box .price i{
|
||||
vertical-align: middle;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-family: MicrosoftYahei-regular,Arial,Helvetica,sans-serif;
|
||||
}
|
||||
.shangpin .box .price .zheng{
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-family: arial,sans-serif;
|
||||
}
|
||||
.shangpin .box .price .ling{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
71
vuenew/cli/demo/src/components/shangpin.vue
Normal file
71
vuenew/cli/demo/src/components/shangpin.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
|
||||
<div class="shangpin">
|
||||
|
||||
<img class="spimg" src="//img12.360buyimg.com/jdcms/s150x150_jfs/t1/159091/6/13582/351629/60515ec7Eae162e4d/5fbdf654ea0fd7cc.jpg.webp" alt="美国（G-force）无链条折叠电动车外卖代驾成人电动自行车迷你轴传动电瓶车闪电发货 深空灰-汽车电芯无链条传动技术-6AH60公里">
|
||||
<div class="box">
|
||||
<p class="jianjie">
|
||||
美国（G-force）无链条折叠电动车外卖代驾成人电动自行车迷你轴传动电瓶车闪电发货 深空灰-汽车电芯无链条传动技术-6AH60公里
|
||||
</p>
|
||||
<div class="price">
|
||||
<i>¥</i>
|
||||
<span class="zheng">2998.<span class="ling">00</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'shangpin'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.shangpin{
|
||||
width: 190px;
|
||||
height: 266px;
|
||||
margin: 0 5px 8px;
|
||||
background: #fff;
|
||||
}
|
||||
.shangpin .spimg{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 30px 0 0 28px;
|
||||
}
|
||||
.shangpin .jianjie{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
height: 40px;
|
||||
}
|
||||
.shangpin .box{
|
||||
margin: 30px 15px 0 15px;
|
||||
}
|
||||
.shangpin .box .price{
|
||||
color: #e1251b;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
.shangpin .box .price i{
|
||||
vertical-align: middle;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-family: MicrosoftYahei-regular,Arial,Helvetica,sans-serif;
|
||||
}
|
||||
.shangpin .box .price .zheng{
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-family: arial,sans-serif;
|
||||
}
|
||||
.shangpin .box .price .ling{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
122
vuenew/cli/demo/src/components/topjiesuan.vue
Normal file
122
vuenew/cli/demo/src/components/topjiesuan.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="top-jiesuan">
|
||||
<span>全部商品</span>
|
||||
<div>
|
||||
<span>已选商品价格：</span>
|
||||
<span>{{sumprice.toFixed(2)}}</span>
|
||||
<button>结算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xian"></div>
|
||||
<div class="jsbiaotou">
|
||||
<div class="jsbtleft">
|
||||
<p>
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" >全选</el-checkbox>
|
||||
|
||||
</p>
|
||||
<p>商品信息</p>
|
||||
</div>
|
||||
<div class="jsbtright">
|
||||
<p>单价</p>
|
||||
<p>数量</p>
|
||||
<p>金额</p>
|
||||
<p>操作</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'topjiesuan',
|
||||
props:{
|
||||
sumprice:Number
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
checkAll: false,
|
||||
isIndeterminate: true,
|
||||
checkedCities: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// handleCheckAllChange(val) {
|
||||
// this.checkedCities = val ? cityOptions : [];
|
||||
// this.isIndeterminate = false;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.top-jiesuan{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
.top-jiesuan span:nth-child(1){
|
||||
color: #e2231a;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.top-jiesuan div span:nth-child(1){
|
||||
color: black;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.top-jiesuan div span:nth-child(2){
|
||||
color:#e2231a;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.top-jiesuan button{
|
||||
border-radius: 0;
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
border: none;
|
||||
background-color: #e1251b;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
.top-jiesuan button:hover{
|
||||
background-color: #bd1108;
|
||||
}
|
||||
.xian{
|
||||
width: 95%;
|
||||
height: 1px;
|
||||
background-color:rgb(209, 208, 208);
|
||||
margin: 0 auto;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.jsbiaotou{
|
||||
padding: 10px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
.jsbiaotou .jsbtleft{
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
}
|
||||
.jsbiaotou .jsbtright{
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
margin-right: 50px;
|
||||
|
||||
}
|
||||
.jsbiaotou .jsbtleft p:last-child{
|
||||
margin-left: 50px;
|
||||
}
|
||||
.jsbiaotou .jsbtright p{
|
||||
margin-left: 100px;
|
||||
}
|
||||
.el-checkbox:checked .el-checkbox__label{
|
||||
color: #e2231a!important;
|
||||
}
|
||||
</style>
|
||||
140
vuenew/cli/demo/src/components/tuijian.vue
Normal file
140
vuenew/cli/demo/src/components/tuijian.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
|
||||
<div class="feed-tab-wrapper ">
|
||||
<ul class="feed-tab">
|
||||
<li :class="{active:active==index?'active':'',active1:active1==index?'active1':''}" label="精选 猜你喜欢" @click="active=index" @mouseenter="active1=index" @mouseleave="active1=null" aria-selected="true" v-for="(item,index) in tabs" :key="index">
|
||||
<div class="feed-tab__item-title">
|
||||
<span class="feed-tab__item-title-text">{{item.jingxuan}}</span>
|
||||
</div>
|
||||
<div class="feed-tab__item-desc">{{item.cainixihuan}}</div>
|
||||
<div class="feed-tab__item-gap" v-if='xiaoshi!=index' ></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'tuijian',
|
||||
data(){
|
||||
return{
|
||||
xiaoshi:5,
|
||||
active:0,
|
||||
active1:null,
|
||||
|
||||
tabs:[
|
||||
{
|
||||
jingxuan:'精选',
|
||||
cainixihuan:'猜你喜欢',
|
||||
},
|
||||
{
|
||||
jingxuan:'智能先锋',
|
||||
cainixihuan:'大电器城',
|
||||
},
|
||||
{
|
||||
jingxuan:'居家优品',
|
||||
cainixihuan:'品质生活',
|
||||
},
|
||||
{
|
||||
jingxuan:'超市百货',
|
||||
cainixihuan:'百货生鲜',
|
||||
},
|
||||
{
|
||||
jingxuan:'时尚达人',
|
||||
cainixihuan:'美妆穿搭',
|
||||
},
|
||||
{
|
||||
jingxuan:'进口好物',
|
||||
cainixihuan:'京东国际',
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
|
||||
},
|
||||
mounted:{
|
||||
// if(this.xiangtong == 'active'){
|
||||
// active1=null;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.feed-tab-wrapper {
|
||||
background: #fff;
|
||||
margin: 0 auto ;
|
||||
|
||||
/* position: relative; */
|
||||
/* top: 70px;
|
||||
left: 12.5%; */
|
||||
width:74% ;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.feed-tab-wrapper .feed-tab {
|
||||
height: 60px;
|
||||
margin-left: 12px;
|
||||
|
||||
}
|
||||
.feed-tab-wrapper li {
|
||||
list-style: none;
|
||||
}
|
||||
.feed-tab-wrapper li {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active .feed-tab__item-title-text {
|
||||
background: #e1251b;
|
||||
color: #fff!important;
|
||||
width: 70px;
|
||||
height: 27px;
|
||||
display: inline-block;
|
||||
border-radius: 50px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.active .feed-tab__item-desc {
|
||||
color: #e1251b;
|
||||
}
|
||||
.active1 .feed-tab__item-desc {
|
||||
color: #e1251b;
|
||||
}
|
||||
.active1 .feed-tab__item-title-text {
|
||||
color: #e1251b;
|
||||
}
|
||||
.feed-tab__item-desc {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
.feed-tab__item-title {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 27px;
|
||||
}
|
||||
.feed-tab__item-gap {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 40px;
|
||||
margin: 10px 0;
|
||||
width: 1px;
|
||||
background: #dfdfdf;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
17
vuenew/cli/demo/src/main.js
Normal file
17
vuenew/cli/demo/src/main.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import router from './router'
|
||||
import axios from 'axios'
|
||||
import VueAxios from 'vue-axios'
|
||||
|
||||
Vue.use(ElementUI);
|
||||
Vue.use(VueAxios, axios);
|
||||
Vue.prototype.$axios = axios;
|
||||
Vue.config.productionTip = false;
|
||||
new Vue({
|
||||
el:'#app',
|
||||
router:router,
|
||||
render: h => h(App),
|
||||
})
|
||||
325
vuenew/cli/demo/src/pages/gouwuche.vue
Normal file
325
vuenew/cli/demo/src/pages/gouwuche.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<div>
|
||||
<navbar1
|
||||
:logopangzi="logopangzi"
|
||||
:gouwuchenum="gouwuchenum"
|
||||
:loginmsg="loginmsg"
|
||||
></navbar1>
|
||||
<div class="gwccontent">
|
||||
<!-- <topjiesuan :sumprice=sumprice></topjiesuan> -->
|
||||
<div>
|
||||
<div class="top-jiesuan">
|
||||
<span>全部商品</span>
|
||||
<div>
|
||||
<span>已选商品价格：</span>
|
||||
<span>{{ sumprice.toFixed(2) }}</span>
|
||||
<button>结算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xian"></div>
|
||||
<div class="jsbiaotou">
|
||||
<div class="jsbtleft">
|
||||
<p>商品信息</p>
|
||||
</div>
|
||||
<div class="jsbtright">
|
||||
<p>单价</p>
|
||||
<p>数量</p>
|
||||
<p>金额</p>
|
||||
<p>操作</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-checkbox-group v-model="selected" @change="selectone">
|
||||
<gouwuchelist
|
||||
v-for="(shangpin, index) in shangpinlist"
|
||||
:shangpin="shangpin"
|
||||
:key="index"
|
||||
@xz="xuanzhong"
|
||||
></gouwuchelist>
|
||||
</el-checkbox-group>
|
||||
|
||||
<div class="bottom-jiesuan">
|
||||
<div class="js-right">
|
||||
<div class="js-right-right">
|
||||
<el-checkbox v-model="checkAll" @change="selectall"
|
||||
>全选</el-checkbox
|
||||
>
|
||||
<a href="">删除</a>
|
||||
<a href="">移入收藏夹</a>
|
||||
<a href="">分享</a>
|
||||
</div>
|
||||
<div class="js-right-left">
|
||||
<p>
|
||||
已选商品<span>{{ sumnum }}</span
|
||||
>件
|
||||
</p>
|
||||
<p>
|
||||
合计（不含运费）：<span>{{ sumprice.toFixed(2) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="js-left">
|
||||
<p>结算</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <bottomjiesuan :sumnum=sumnum :sumprice=sumprice class="bottomjiesuan"></bottomjiesuan> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navbar1 from "../components/navbar1";
|
||||
// import topjiesuan from "../components/topjiesuan"
|
||||
import gouwuchelist from "../components/gouwuchelist";
|
||||
// import bottomjiesuan from "../components/bottomjiesuan"
|
||||
|
||||
export default {
|
||||
name: "gouwuche",
|
||||
data() {
|
||||
return {
|
||||
logopangzi: "购物车",
|
||||
gouwuchenum: 0,
|
||||
loginmsg: "返回首页",
|
||||
sumprice: 0.0,
|
||||
sumnum: 0,
|
||||
shangpinlist: [
|
||||
{
|
||||
dianpuname: "xxx店铺",
|
||||
shangpinname:
|
||||
"珊瑚绒睡衣女士春秋冬季长袖韩版法兰绒加厚可爱冬天家居服套装",
|
||||
yuanjia: 50.0,
|
||||
xianjia: 11.9,
|
||||
num4: 1,
|
||||
img: "1",
|
||||
ahrsf: "",
|
||||
canshulist: [
|
||||
{
|
||||
canshuname: "颜色分类",
|
||||
canshuvalue: "咖啡爱心",
|
||||
},
|
||||
{
|
||||
canshuname: "尺码",
|
||||
canshuvalue: "（170）xxl",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
dianpuname: "xxx店铺",
|
||||
shangpinname:
|
||||
"珊瑚绒睡衣女士春秋冬季长袖韩版法兰绒加厚可爱冬天家居服套装",
|
||||
yuanjia: 50.0,
|
||||
xianjia: 13.9,
|
||||
num4: 1,
|
||||
img: "2",
|
||||
ahrsf: "",
|
||||
canshulist: [
|
||||
{
|
||||
canshuname: "颜色分类",
|
||||
canshuvalue: "咖啡爱心",
|
||||
},
|
||||
{
|
||||
canshuname: "尺码",
|
||||
canshuvalue: "（170）xxl",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
dianpuname: "xxx店铺",
|
||||
shangpinname:
|
||||
"珊瑚绒睡衣女士春秋冬季长袖韩版法兰绒加厚可爱冬天家居服套装",
|
||||
yuanjia: 50.0,
|
||||
xianjia: 198.9,
|
||||
num4: 1,
|
||||
img: "",
|
||||
ahrsf: "",
|
||||
canshulist: [
|
||||
{
|
||||
canshuname: "颜色分类",
|
||||
canshuvalue: "咖啡爱心",
|
||||
},
|
||||
{
|
||||
canshuname: "尺码",
|
||||
canshuvalue: "（170）xxl",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
checkAll: false,
|
||||
selected: [],
|
||||
// cities: cityOptions,
|
||||
isIndeterminate: true,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
navbar1,
|
||||
// topjiesuan,
|
||||
gouwuchelist,
|
||||
// bottomjiesuan,
|
||||
},
|
||||
methods: {
|
||||
selectone(value) {
|
||||
console.log(value);
|
||||
// this.selected=[]
|
||||
// let checkedCount = value.length;
|
||||
// this.checkAll = checkedCount === this.cities.length;
|
||||
// this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
||||
},
|
||||
xuanzhong(e) {
|
||||
console.log(e);
|
||||
// this.selected.push(e)
|
||||
},
|
||||
selectall(e) {
|
||||
console.log(e)
|
||||
if (e){
|
||||
for (let i in this.shangpinlist) {
|
||||
// this.selected[i]=this.shangpinlist[i].xianjia;
|
||||
this.selected.push(this.shangpinlist[i].xianjia)
|
||||
// this.zong = this.zong + this.shangpinlist[i].xianjia;
|
||||
}
|
||||
console.log(this.selected)
|
||||
// console.log(this.checkedlist);
|
||||
} else {
|
||||
this.selected=[]
|
||||
console.log(this.selected)
|
||||
// this.zong = 0;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bottom-jiesuan {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0px;
|
||||
margin: 0 auto;
|
||||
background-color: #e5e5e5;
|
||||
width: 98%;
|
||||
height: 40px;
|
||||
}
|
||||
.js-right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.js-right a {
|
||||
margin-left: 30px;
|
||||
color: black;
|
||||
}
|
||||
.js-right a:hover {
|
||||
color: #e2231a;
|
||||
}
|
||||
.js-right-left {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
.js-right-left p {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.js-right-left span {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #e2231a;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.js-left p {
|
||||
/* margin-right: 20px; */
|
||||
line-height: 18px;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
margin: auto 0;
|
||||
margin-top: 12px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.js-left {
|
||||
background-color: #b0b0b0;
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.top-jiesuan {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
.top-jiesuan span:nth-child(1) {
|
||||
color: #e2231a;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.top-jiesuan div span:nth-child(1) {
|
||||
color: black;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.top-jiesuan div span:nth-child(2) {
|
||||
color: #e2231a;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.top-jiesuan button {
|
||||
border-radius: 0;
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
border: none;
|
||||
background-color: #e1251b;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
.top-jiesuan button:hover {
|
||||
background-color: #bd1108;
|
||||
}
|
||||
.xian {
|
||||
width: 95%;
|
||||
height: 1px;
|
||||
background-color: rgb(209, 208, 208);
|
||||
margin: 0 auto;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.jsbiaotou {
|
||||
padding: 10px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
.jsbiaotou .jsbtleft {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
}
|
||||
.jsbiaotou .jsbtright {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
margin-right: 50px;
|
||||
}
|
||||
.jsbiaotou .jsbtleft p:last-child {
|
||||
margin-left: 50px;
|
||||
}
|
||||
.jsbiaotou .jsbtright p {
|
||||
margin-left: 100px;
|
||||
}
|
||||
.el-checkbox:checked .el-checkbox__label {
|
||||
color: #e2231a !important;
|
||||
}
|
||||
|
||||
.gwccontent {
|
||||
background-color: white;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.bottomjiesuan {
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
75
vuenew/cli/demo/src/pages/index.vue
Normal file
75
vuenew/cli/demo/src/pages/index.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div >
|
||||
<navbar1 class="navbar" :logopangzi='logopangzi' :gouwuchenum=gouwuchenum :loginmsg='loginmsg'></navbar1>
|
||||
<div class="zhankong"></div>
|
||||
<tuijian class="tuijian"></tuijian>
|
||||
<div class="shangpinlist">
|
||||
<shangpin class="shangpin"></shangpin>
|
||||
<shangpin class="shangpin"></shangpin>
|
||||
<shangpin class="shangpin"></shangpin>
|
||||
<shangpin class="shangpin"></shangpin>
|
||||
<shangpin class="shangpin"></shangpin>
|
||||
<shangpin class="shangpin"></shangpin>
|
||||
<shangpin class="shangpin"></shangpin>
|
||||
<shangpin class="shangpin"></shangpin>
|
||||
<shangpin class="shangpin"></shangpin>
|
||||
<shangpin class="shangpin"></shangpin>
|
||||
</div>
|
||||
<el-pagination class="fenye" background="#f10214" layout="prev, pager, next" :total="10"></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navbar1 from "../components/navbar1"
|
||||
import tuijian from "../components/tuijian"
|
||||
import shangpin from "../components/shangpin"
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
data () {
|
||||
return {
|
||||
logopangzi: '',
|
||||
gouwuchenum:0,
|
||||
loginmsg:'注册/登录'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
navbar1,
|
||||
tuijian,
|
||||
shangpin,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.navbar{
|
||||
position: fixed;
|
||||
}
|
||||
.zhankong{
|
||||
height: 70px;
|
||||
}
|
||||
.tuijian{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.shangpinlist{
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active{
|
||||
background-color: #f10214;
|
||||
|
||||
}
|
||||
.fenye{
|
||||
margin: 50px 0 0 200px;
|
||||
}
|
||||
</style>
|
||||
28
vuenew/cli/demo/src/router/index.js
Normal file
28
vuenew/cli/demo/src/router/index.js
Normal file
@@ -0,0 +1,28 @@
|
||||
//配置路由相关的信息
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import index from '../pages/index'
|
||||
import gouwuche from '../pages/gouwuche'
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path:'/',
|
||||
redirect:'/gouwuche'
|
||||
},
|
||||
{
|
||||
path:'/index',
|
||||
component:index
|
||||
},
|
||||
{
|
||||
path:'/gouwuche',
|
||||
component:gouwuche
|
||||
},
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router
|
||||
BIN
vuenew/cli/demo/src1.zip
Normal file
BIN
vuenew/cli/demo/src1.zip
Normal file
Binary file not shown.
8599
vuenew/cli/demo/yarn.lock
Normal file
8599
vuenew/cli/demo/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
23
vuenew/cli/demo2/.gitignore
vendored
Normal file
23
vuenew/cli/demo2/.gitignore
vendored
Normal file
@@ -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?
|
||||
24
vuenew/cli/demo2/README.md
Normal file
24
vuenew/cli/demo2/README.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# demo2
|
||||
|
||||
## Project setup
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
yarn serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
yarn lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
5
vuenew/cli/demo2/babel.config.js
Normal file
5
vuenew/cli/demo2/babel.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
45
vuenew/cli/demo2/package.json
Normal file
45
vuenew/cli/demo2/package.json
Normal file
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"name": "demo2",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"core-js": "^3.6.5",
|
||||
"element-ui": "^2.15.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
BIN
vuenew/cli/demo2/public/favicon.ico
Normal file
BIN
vuenew/cli/demo2/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
vuenew/cli/demo2/public/index.html
Normal file
17
vuenew/cli/demo2/public/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!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">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
BIN
vuenew/cli/demo2/src.zip
Normal file
BIN
vuenew/cli/demo2/src.zip
Normal file
Binary file not shown.
53
vuenew/cli/demo2/src/App.vue
Normal file
53
vuenew/cli/demo2/src/App.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
msg: "hello world",
|
||||
sty: "color:gold",
|
||||
like: true,
|
||||
team:["Ruby","Weiss","Blake","Yang"],
|
||||
q:"fff",
|
||||
value1: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
if (this.like) {
|
||||
this.like = false;
|
||||
} else {
|
||||
this.like = true;
|
||||
}
|
||||
|
||||
// this.like=this.like?false:true
|
||||
},
|
||||
go(){
|
||||
this.$router.push({path:"/qaq",query:{a:123}})
|
||||
},
|
||||
|
||||
go2(){
|
||||
this.$router.push({name:"qaq",params:{a:123}})
|
||||
},
|
||||
bossname(e){
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
BIN
vuenew/cli/demo2/src/assets/logo.png
Normal file
BIN
vuenew/cli/demo2/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
62
vuenew/cli/demo2/src/components/qaq.vue
Normal file
62
vuenew/cli/demo2/src/components/qaq.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>选择效果</p>
|
||||
<el-checkbox v-model="checkAll" @change="selectall">全选</el-checkbox>
|
||||
<div style="margin: 15px 0"></div>
|
||||
|
||||
<el-checkbox-group v-model="checkedlist" @change="selectone" >
|
||||
<el-checkbox v-for="(i, j) in list" :label="i.pri" :key="j">{{
|
||||
i.name
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
|
||||
<p>总价：{{ zong }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "qaq",
|
||||
data() {
|
||||
return {
|
||||
checkAll: false,
|
||||
checkedlist: [],
|
||||
list: [
|
||||
{ name: "aaa", pri: 30 },
|
||||
{ name: "bbb", pri: 40 },
|
||||
{ name: "ccc", pri: 50 },
|
||||
],
|
||||
zong: 0,
|
||||
isIndeterminate: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selectall(val) {
|
||||
console.log(val);
|
||||
// this.checkedlist = val ? this.list : [];
|
||||
this.checkedlist = [];
|
||||
this.zong = 0;
|
||||
if (val) {
|
||||
for (let i in this.list) {
|
||||
this.checkedlist.push(this.list[i].pri);
|
||||
this.zong = this.zong + this.list[i].pri;
|
||||
}
|
||||
console.log(this.checkedlist);
|
||||
} else {
|
||||
this.zong = 0;
|
||||
}
|
||||
},
|
||||
selectone(e) {
|
||||
// console.log(e)
|
||||
this.zong=0
|
||||
for(let i in e){
|
||||
console.log(e[i])
|
||||
this.zong=this.zong+e[i]
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
16
vuenew/cli/demo2/src/main.js
Normal file
16
vuenew/cli/demo2/src/main.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import VueRouter from 'vue-router'
|
||||
import router from './router'
|
||||
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI);
|
||||
Vue.use(VueRouter)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
18
vuenew/cli/demo2/src/router/index.js
Normal file
18
vuenew/cli/demo2/src/router/index.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import qaq from "../components/qaq"
|
||||
import axios from 'axios';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.prototype.$axios = axios;
|
||||
|
||||
const routes = [
|
||||
{ path: '/qaq', name:"qaq", component: qaq },
|
||||
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
export default router;
|
||||
8589
vuenew/cli/demo2/yarn.lock
Normal file
8589
vuenew/cli/demo2/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user