初始化
This commit is contained in:
liulongbin
26
src/App.vue
26
src/App.vue
@@ -1,28 +1,16 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<div class="app-container">
|
||||
<h1>App 根组件</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
<style lang="less" scoped>
|
||||
.app-container {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
27
src/components/Counter/Counter.vue
Normal file
27
src/components/Counter/Counter.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="number-container d-flex justify-content-center align-items-center">
|
||||
<!-- 减 1 的按钮 -->
|
||||
<button type="button" class="btn btn-light btn-sm">-</button>
|
||||
<!-- 购买的数量 -->
|
||||
<span class="number-box">1</span>
|
||||
<!-- 加 1 的按钮 -->
|
||||
<button type="button" class="btn btn-light btn-sm">+</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.number-box {
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
margin: 0 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
width: 30px;
|
||||
}
|
||||
</style>
|
||||
60
src/components/Footer/Footer.vue
Normal file
60
src/components/Footer/Footer.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="footer-container">
|
||||
<!-- 左侧的全选 -->
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="cbFull" :checked="true" />
|
||||
<label class="custom-control-label" for="cbFull">全选</label>
|
||||
</div>
|
||||
|
||||
<!-- 中间的合计 -->
|
||||
<div>
|
||||
<span>合计：</span>
|
||||
<span class="total-price">￥{{ 0 }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 结算按钮 -->
|
||||
<button type="button" class="btn btn-primary btn-settle">结算（{{ 0 }}）</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.footer-container {
|
||||
font-size: 12px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
border-top: 1px solid #efefef;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.custom-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#cbFull {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn-settle {
|
||||
height: 80%;
|
||||
min-width: 110px;
|
||||
border-radius: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
69
src/components/Goods/Goods.vue
Normal file
69
src/components/Goods/Goods.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="goods-container">
|
||||
<!-- 左侧图片 -->
|
||||
<div class="thumb">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<!-- 复选框 -->
|
||||
<input type="checkbox" class="custom-control-input" id="cb1" :checked="true" />
|
||||
<label class="custom-control-label" for="cb1">
|
||||
<!-- 商品的缩略图 -->
|
||||
<img src="../../assets/logo.png" alt="" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧信息区域 -->
|
||||
<div class="goods-info">
|
||||
<!-- 商品标题 -->
|
||||
<h6 class="goods-title">商品名称商品名称商品名称商品名称</h6>
|
||||
<div class="goods-info-bottom">
|
||||
<!-- 商品价格 -->
|
||||
<span class="goods-price">￥0</span>
|
||||
<!-- 商品的数量 -->
|
||||
<Counter></Counter>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.goods-container {
|
||||
+ .goods-container {
|
||||
border-top: 1px solid #efefef;
|
||||
}
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
.thumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
.goods-title {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
.goods-info-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.goods-price {
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
23
src/components/Header/Header.vue
Normal file
23
src/components/Header/Header.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="header-container">标题</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.header-container {
|
||||
font-size: 12px;
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
background-color: #1d7bff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="less">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,10 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
// 导入 bootstrap 样式表
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
Reference in New Issue
Block a user