Skip to content

S
store-system
Commit d13b6506 authored by 燕南天's avatar 燕南天
Browse files
Options

页面组件封装

parent 7de07c63
Hide whitespace changes
Inline Side-by-side
Showing with 497 additions and 126 deletions
2code/web/h5_pro/build/webpack.base.conf.js
View file @ d13b6506
......@@ -74,6 +74,14 @@ module.exports = {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.less$/,
loaders: ["style", "css", "less"]
}
]
},
......
2code/web/h5_pro/index.html
View file @ d13b6506
......@@ -4,9 +4,11 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>xule_pro</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript">document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px'; </script>
</body>
</html>
2code/web/h5_pro/package-lock.json 0 → 100644
View file @ d13b6506
This source diff could not be displayed because it is too large. You can view the blob instead.
2code/web/h5_pro/package.json
View file @ d13b6506
......@@ -62,11 +62,13 @@
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^7.1.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-awesome-swiper": "^3.1.3",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
......
2code/web/h5_pro/src/App.vue
View file @ d13b6506
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <img src="./assets/logo.png"> -->
<router-view/>
</div>
</template>
......@@ -11,13 +11,13 @@ export default {
}
</script>
<style>
#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">
*{
padding: 0;
margin: 0;
}
body,html {
font-family:'微软雅黑';
};
</style>
2code/web/h5_pro/src/components/CHeader/index.vue 0 → 100644
View file @ d13b6506
<template>
<div class="header">
<span v-if="!noBack" class="back" @click="bankFun">返回</span>
{{title}}
</div>
</template>
<script>
export default {
props:['title','noBack'],
methods:{
bankFun(){
this.$router.go(-1)
}
}
}
</script>
<style lang="less" scoped>
@r:100rem;
.header{
font-size: 36/@r;
line-height:90/@r;
text-align: center;
border-bottom: solid 1px #dedede;
position: relative;
.back{
cursor: pointer;
position: absolute;
left: 30/@r;
}
}
</style>
2code/web/h5_pro/src/components/HelloWorld.vue deleted 100644 → 0
View file @ 7de07c63
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
2code/web/h5_pro/src/main.js
View file @ d13b6506
......@@ -3,7 +3,11 @@
import Vue from 'vue'
import App from './App'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
Vue.config.productionTip = false
/* eslint-disable no-new */
......
2code/web/h5_pro/src/router/index.js
View file @ d13b6506
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/views/home/index.vue'
import ShopList from '@/views/shopList/index.vue'
Vue.use(Router)
......@@ -8,8 +11,13 @@ export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
name: 'index',
component: Home
},
{
path: '/shopList',
name: 'shopList',
component: ShopList
}
]
})
2code/web/h5_pro/src/views/home/components/HBanner.vue 0 → 100644
View file @ d13b6506
<template>
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in data" :key="index">
<img :src="item.url" :alt="item.href" :data-href="item.href" @click="toWebview">
</swiper-slide>
<div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
props: ["data"],
data() {
return {
swiperOption: {
pagination: {
el: ".swiper-pagination",
clickable: true
}
}
};
},
methods: {
toWebview(e) {
const href = e.target.dataset.href;
alert("跳转到：" + href);
}
}
};
</script>
<style lang="less" scoped>
@r: 100rem;
.swiper-pagination-bullet-custom {
width: 40 / @r;
height: 40 / @r;
text-align: center;
line-height: 40 / @r;
font-size: 24 / @r;
color: #000;
opacity: 1;
background: rgba(0, 0, 0, 0.2);
}
.swiper-pagination-bullet-custom.swiper-pagination-bullet-active {
color: #fff;
background: #007aff;
}
.swiper-slide {
height: 410 / @r;
img {
display: block;
width: 100%;
height: 100%;
background: #dedede;
}
}
</style>
2code/web/h5_pro/src/views/home/components/HItemTitle.vue 0 → 100644
View file @ d13b6506
<template>
<div class="title" @click="toList">
<div class="name">{{title}}</div>
<div class="btn">查看更多</div>
</div>
</template>
<script>
export default {
props:['title','href'],
methods:{
toList(){
this.$router.push(this.href)
}
}
}
</script>
<style lang="less" scoped>
@r:100rem;
.title{
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding:0 20/@r;
margin: 20/@r 0;
line-height: 90/@r;
background: #dedede;
.name{
font-size: 36/@r;
color: #333;
}
.btn{
color: #666;
font-size: 28/@r;
cursor: pointer;
}
}
</style>
2code/web/h5_pro/src/views/home/components/HShopList.vue 0 → 100644
View file @ d13b6506
<template>
<div class="shop-list-wrapper">
<div class="list-item" v-for="(item,index) in data" :key="index" :data-id="item.id" @click="toShopDetails">
<div class="img" :data-id="item.id">
<img :src="item.url" :data-id="item.id" alt="">
</div>
<div class="item-infro" :data-id="item.id">
<div class="name" :data-id="item.id">{{item.title}}</div>
<div class="details" :data-id="item.id">{{item.infro}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['data'],
methods:{
toShopDetails(e){
const id = e.target.dataset.id;
alert(id)
}
}
}
</script>
<style lang="less" scoped>
@r:100rem;
.list-item{
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 30/@r;
border-bottom: solid 1px #dedede;
&:last-child{
border: none;
}
.img{
width: 120/@r;
height: 120/@r;
background: #dedede;
}
.item-infro{
width: 540/@r;
.name{
font-size: 32/@r;
color: #333;
}
.details{
font-size: 24/@r;
color: #999;
}
}
}
</style>
2code/web/h5_pro/src/views/home/components/HStaff.vue 0 → 100644
View file @ d13b6506
<template>
<div class="staff-wrapper">
<div class="staff-item" v-for="(item,index) in data" :key="index" :data-id="item.id" @click="toDetails">
<img :src="item.src" :data-id="item.id" alt="">
<div class="infro" :data-id="item.id">{{item.bref}}</div>
</div>
</div>
</template>
<script>
export default {
props:['data'],
methods:{
toDetails(e){
const id = e.target.dataset.id
alert(id)
}
}
}
</script>
<style lang="less" scoped>
@r:100rem;
.staff-wrapper{
display: flex;
flex-wrap: wrap;
padding: 0 30/@r;
.staff-item{
width: 220/@r;
height: 280/@r;
position: relative;
margin-bottom: 15/@r;
margin-left: 15/@r;
&:nth-child(3n+1){
margin-left: 0;
}
img{
display: block;
background: #dedede;
width: 100%;
height: 100%;
}
.infro{
position: absolute;
width: 100%;
height: 80/@r;
left: 0;
bottom: 0;
font-size: 28/@r;
background: rgba(0, 0, 0, .5);
}
}
}
</style>
2code/web/h5_pro/src/views/home/index.vue 0 → 100644
View file @ d13b6506
<template>
<div>
<c-header title="首页" noBack="1"></c-header>
<h-banner :data="bannerData"></h-banner>
<h-item-title title="精选商家" href="/shopList"></h-item-title>
<h-shop-list :data="shopListData"></h-shop-list>
<h-item-title title="闪亮之星" href="闪亮之星的地址"></h-item-title>
<h-staff :data="staffData"></h-staff>
</div>
</template>
<script>
import CHeader from '@/components/CHeader'
import HBanner from './components/HBanner'
import HShopList from './components/HShopList'
import HItemTitle from './components/HItemTitle'
import HStaff from './components/HStaff'
export default {
components:{CHeader,HBanner,HShopList,HItemTitle,HStaff},
data () {
return {
bannerData:[
{
url:'1',
href:'111'
},
{
url:'2',
href:'222'
}
],
shopListData:[
{
id:'1',
url:'12',
title:'123',
infro:'312321'
},
{
id:'2',
url:'12',
title:'123',
infro:'312321'
}
],
staffData:[
{
id:'1',
url:'1',
bref:'1'
},
{
id:'2',
url:'2',
bref:'2'
},
{
id:'1',
url:'1',
bref:'1'
},
{
id:'2',
url:'2',
bref:'2'
},
{
id:'1',
url:'1',
bref:'1'
},
{
id:'2',
url:'2',
bref:'2'
},
{
id:'1',
url:'1',
bref:'1'
},
{
id:'2',
url:'2',
bref:'2'
},
{
id:'1',
url:'1',
bref:'1'
}
]
}
}
}
</script>
2code/web/h5_pro/src/views/shopList/components/SItem.vue 0 → 100644
View file @ d13b6506
<template>
<div class="item">
<div class="img">
<img :src="data.src" alt="">
</div>
<div class="item-infro">
<div class="title">{{data.title}}</div>
<div class="infro">{{data.infro}}</div>
<div class="adress">{{data.adress}}</div>
</div>
</div>
</template>
<script>
export default {
props:["data"]
};
</script>
<style lang="less" scoped>
@r: 100rem;
.item {
display: flex;
.img {
width: 160 / @r;
height: 160 / @r;
img {
display: block;
width: 100%;
height: 100%;
background: #dedede;
}
}
.item-infro {
.title {
font-size: 32 / @r;
color: #333;
}
.infro {
font-size: 24 / @r;
color: #999;
}
.adress {
font-size: 24 / @r;
color: #666;
}
}
}
</style>
2code/web/h5_pro/src/views/shopList/index.vue 0 → 100644
View file @ d13b6506
<template>
<div>
<c-header title="商家列表"></c-header>
<s-item v-for="(item,index) in shopListData" :key="index" :data="item" @click.native="toDetails(item.id)"></s-item>
</div>
</template>
<script>
import CHeader from '@/components/CHeader'
import SItem from './components/SItem'
export default {
components:{CHeader,SItem},
data(){
return {
shopListData:[
{
id:'1',
url:'111',
title:'1111',
infro:'1111111',
adress:'111111'
},
{
id:'2',
url:'222222',
title:'22222222',
infro:'222222222',
adress:'22222222222'
},
{
id:'3333333',
url:'33333333333333',
title:'333333333333333',
infro:'3333333333333',
adress:'33333333333333333333'
}
]
}
},
methods:{
toDetails(id){
alert(id)
}
}
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment