组件提交

王强
1 parent b19ee132
Showing 47 changed files with 359 additions and 11 deletions
src/components/horizList/horizList.less
src/components/horizList/horizList.vue
src/components/style_1/style_1.less
src/components/style_1/style_1.vue
src/components/titleBox/titleBox.less
src/components/titleBox/titleBox.vue
src/pages/com/com.less
src/pages/com/com.vue
src/router/index.js
static/img/1.png
static/img/11.jpg
static/img/12.jpg
static/img/13.jpg
static/img/14.jpg
static/img/15.jpg
static/img/2.png
static/img/21.jpg
static/img/22.jpg
static/img/23.jpg
static/img/24.jpg
+@charset "UTF-8";
+
+.horiz-list-box {
+	background-color: transparent;
+	width: 100%;
+	height: auto;
+	.box {
+		
+	}
+}
 \ No newline at end of file
+<template>
+    <div class="horiz-list-box" v-if="lists && lists.list && lists.list.length">
+		<div class="box">
+			<div class="item-box" v-for="(item, index) in lists.list" :key="index" @click="jump(item)">
+				<div class="img-box">
+					<img :src="item.simg + SIGN.SMALL" class="simg" />
+				</div>
+				<div class="title">{{item.title}}</div>
+				<div class="price-box">
+					<div class="price">{{item.price}}</div>
+					<div class="add-cart" @click.stop.prevent @click="addCart(item)">
+						<img src="static/img/" class="add-img" />
+					</div>
+				</div>
+			</div>
+		</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function () {
+            return {
+                
+            }
+        },
+        props: ["lists"],
+		methods: {
+			
+			/**
+			 * 点击跳转
+			 */
+			jump(item) {
+				this.$emit("jump", item);
+			},
+
+			/**
+			 * 加入购物车
+			 */
+			addCart(item) {
+				this.$emit("addCart", item);
+			}
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+    @import './horizList';
+</style>
 \ No newline at end of file
+@charset "UTF-8";
+
+.style-1-com {
+	background-color: transparent;
+	width: 100%;
+	height: auto;
+	.com {
+		.banner-img-box {
+			margin-top: 30px;
+			width: 100%;
+			height: auto;
+			.banner-img {
+				display: block;
+				width: 100%;
+				height: auto;
+			}
+		}
+	}
+}
 \ No newline at end of file
+<template>
+    <div class="style-1-com" v-if="styles">
+		<div class="com">
+			
+			<!-- 引入标题 -->
+			<title-box v-if="styles.titles"
+				:titles="styles.titles">
+			</title-box>
+
+			<!-- Banner图 -->
+			<div class="banner-img-box">
+				<img :src="styles.banner + SIGN.BIG" class="banner-img" mode="widthFix" />
+			</div>
+
+			<!-- 横向滚动列表 -->
+			<horiz-list v-if="styles.lists && styles.lists.list && styles.lists.list.length"
+				:lists="styles.lists">
+			</horiz-list>
+		</div>
+    </div>
+</template>
+
+<script>
+
+	// 引入组件
+	import titleBox from "@/components/titleBox/titleBox";
+	import horizList from "@/components/horizList/horizList";
+
+    export default {
+        data: function () {
+            return {
+                
+            }
+        },
+		props: ["styles"],
+		components: {
+			titleBox,
+			horizList
+        },
+		methods: {
+			
+			
+		},
+		watch: {
+
+			/**
+			 * 监听styles变化
+			 */
+			styles(newVal, oldVal) {
+
+				// 设置横向滚动列表样式
+				if (this.styles.lists && this.styles.lists.length) {
+					this.$set(this.styles.lists, "style", "big-3");
+				}
+			}
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+    @import './style_1';
+</style>
 \ No newline at end of file
+@charset "UTF-8";
+
+.title-box {
+	background-color: transparent;
+	width: 100%;
+	height: auto;
+	.box {
+		position: relative;
+		width: 100%;
+		height: auto;
+		.title-img-box {
+			width: 100%;
+			height: auto;
+			.title-img {
+				display: block;
+				width: 100%;
+				height: auto;
+			}
+		}
+		.more-box {
+			position: absolute;
+			top: 0;
+			right: 20px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: auto;
+			height: 100%;
+			.more-text {
+				color: #999999;
+				font-size: 26px;
+			}
+			.more-arrow-right-img {
+				display: block;
+				width: 26px;
+				height: 26px;
+			}
+		}
+	}
+}
 \ No newline at end of file
+<template>
+    <div class="title-box" v-if="titles">
+		<div class="box">
+			<div class="title-img-box">
+				<img :src="titles.title" class="title-img" mode="widthFix" />
+			</div>
+			<div class="more-box" @click="more(titles.more)">
+				<div class="more-text">更多</div>
+				<img class="more-arrow-right-img" src="static/img/icon_arrow_right.png" />
+			</div>
+		</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function () {
+            return {
+                
+            }
+        },
+        props: ["titles"],
+		methods: {
+			
+			/**
+			 * 更多
+			 * @param {object} item [数据对象]
+			 */
+			more(item) {
+				this.$emit("more", item);
+			}
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+    @import './titleBox';
+</style>
 \ No newline at end of file
+@charset "UTF-8";
+
+.com {
+    
+}
 \ No newline at end of file
+<template>
+    <div class="index-box">
+
+
+        <!-- style_1组件 -->
+        <style-1
+            :styles="style1">
+        </style-1>
+
+
+
+
+
+
+
+
+        
+    </div>
+</template>
+
+<script>
+
+    // 引入组件
+    import { Toast, Indicator } from "mint-ui";
+    import style1 from "@/components/style_1/style_1";
+    
+
+
+
+
+    export default {
+        data () {
+            return {
+                title: "",
+                style1: {
+                    titles: {
+                        title: "static/img/title.png",
+                        more: {
+                            haveMore: true
+                        }
+                    },
+                    banner: "static/img/banner-02.jpg",
+                    lists: {
+                        list: []
+                    }
+                },
+                
+
+
+
+
+
+
+            }
+        },
+        components: {
+            style1,
+
+
+
+        },
+        created() {
+
+            // 设置标题
+            this.$set(this, "title", "aabb");
+
+            
+
+
+
+
+        },
+        methods: {
+
+            /**
+             * 更多
+             * @param {object} item [数据对象]
+             */
+            more(item) {
+                
+
+                console.log("more", item);
+                
+
+
+            },
+
+
+
+
+
+
+
+        },
+        head: {
+            title () {
+                return {
+                    inner: this.title
+                }
+            }
+        },
+        watch: {
+
+            // 设置页面标题
+            title(newVal) {
+                if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
+                    this.$iFrame.insertIFrame(newVal);
+                } else {
+                    this.$emit("updateHead");
+                }
+            }
+        },
+        mounted() {
+            
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang='less' scoped>
+    @import "com";
+</style>
@@ -16,17 +16,17 @@ const router = new Router({
             },
             redirect: "/index",
             children: [
-                // {
-                //     // 首页
-                //     path: "/index",
-                //     name: "index",
-                //     component: resolve => {
-                //         require(["@/pages/index/index"], resolve);
-                //     },
-                //     meta: {
-                //         requireAuth: false
-                //     }
-                // }
+                {
+                    // 组件测试
+                    path: "/com",
+                    name: "com",
+                    component: resolve => {
+                        require(["@/pages/com/com"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
+                }
             ]
         },
         {