pull/1/head
林华焜 4 years ago
parent 47cc8bfcd2
commit fadf85592d

@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

215
package-lock.json generated

@ -1687,6 +1687,17 @@
"integrity": "sha1-4a1IbmxUUBY0xsOXxcEh2qODYHw=",
"dev": true
},
"ansi-styles": {
"version": "4.2.1",
"resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.2.1.tgz",
"integrity": "sha1-kK51xCTQCNJiTFvynq0xd+v881k=",
"dev": true,
"optional": true,
"requires": {
"@types/color-name": "^1.1.1",
"color-convert": "^2.0.1"
}
},
"cacache": {
"version": "13.0.1",
"resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594428010987&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@ -1713,6 +1724,34 @@
"unique-filename": "^1.1.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
"integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true,
"optional": true
},
"find-cache-dir": {
"version": "3.3.1",
"resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.3.1.tgz",
@ -1734,6 +1773,25 @@
"path-exists": "^4.0.0"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1596294337050&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz",
@ -1798,6 +1856,16 @@
"minipass": "^3.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611730985&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": {
"version": "2.3.8",
"resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1600532057758&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@ -1814,6 +1882,18 @@
"terser": "^4.6.12",
"webpack-sources": "^1.4.3"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.0.0-beta.8",
"resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-beta.8.tgz?cache=0&sync_timestamp=1600850425972&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-beta.8.tgz",
"integrity": "sha1-H1I9n+qOjG5PW7mf12gWWvWEWHk=",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
@ -2397,6 +2477,15 @@
"integrity": "sha1-4eguTz6Zniz9YbFhKA0WoRH4ZCg=",
"dev": true
},
"axios": {
"version": "0.18.0",
"resolved": "https://registry.npm.taobao.org/axios/download/axios-0.18.0.tgz?cache=0&sync_timestamp=1597979584536&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.18.0.tgz",
"integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
"requires": {
"follow-redirects": "^1.3.0",
"is-buffer": "^1.1.5"
}
},
"babel-loader": {
"version": "8.1.0",
"resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.1.0.tgz",
@ -2419,6 +2508,27 @@
"object.assign": "^4.1.0"
}
},
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"core-js": {
"version": "2.6.11",
"resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.11.tgz?cache=0&sync_timestamp=1586450527243&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.11.tgz",
"integrity": "sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw="
},
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.11.1.tgz",
"integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
}
}
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@ -2501,6 +2611,14 @@
"tweetnacl": "^0.14.3"
}
},
"better-scroll": {
"version": "1.13.2",
"resolved": "https://registry.npm.taobao.org/better-scroll/download/better-scroll-1.13.2.tgz",
"integrity": "sha1-MebgiM8tI85I5S+tbMWRNP/rL1Y=",
"requires": {
"babel-runtime": "^6.0.0"
}
},
"bfj": {
"version": "6.1.2",
"resolved": "https://registry.npm.taobao.org/bfj/download/bfj-6.1.2.tgz",
@ -3394,6 +3512,12 @@
"integrity": "sha1-FuQHD7qK4ptnnyIVhT7hgasuq8A=",
"dev": true
},
"components": {
"version": "0.1.0",
"resolved": "https://registry.npm.taobao.org/components/download/components-0.1.0.tgz",
"integrity": "sha1-IFfAjpx78mYv7slcSeX/Kpq4XtU=",
"dev": true
},
"compressible": {
"version": "2.0.18",
"resolved": "https://registry.npm.taobao.org/compressible/download/compressible-2.0.18.tgz",
@ -5095,8 +5219,7 @@
"follow-redirects": {
"version": "1.13.0",
"resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.0.tgz?cache=0&sync_timestamp=1597057988030&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.0.tgz",
"integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs=",
"dev": true
"integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs="
},
"for-in": {
"version": "1.0.2",
@ -5942,8 +6065,7 @@
"is-buffer": {
"version": "1.1.6",
"resolved": "https://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz",
"integrity": "sha1-76ouqdqg16suoTqXsritUf776L4=",
"dev": true
"integrity": "sha1-76ouqdqg16suoTqXsritUf776L4="
},
"is-callable": {
"version": "1.2.2",
@ -10279,87 +10401,10 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.0.0-beta.8",
"resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-beta.8.tgz?cache=0&sync_timestamp=1600850425972&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-beta.8.tgz",
"integrity": "sha1-H1I9n+qOjG5PW7mf12gWWvWEWHk=",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.2.1",
"resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.2.1.tgz",
"integrity": "sha1-kK51xCTQCNJiTFvynq0xd+v881k=",
"dev": true,
"optional": true,
"requires": {
"@types/color-name": "^1.1.1",
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
"integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1596294337050&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611730985&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
"vue-router": {
"version": "3.0.2",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.0.2.tgz?cache=0&sync_timestamp=1601637530869&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.0.2.tgz",
"integrity": "sha1-3txnr+bE4rwlaCyLHCqMDXx+Vr4="
},
"vue-style-loader": {
"version": "4.1.2",

@ -7,12 +7,16 @@
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.18.0",
"better-scroll": "^1.13.2",
"core-js": "^3.6.5",
"vue": "^2.6.11"
"vue": "^2.6.11",
"vue-router": "^3.0.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.0",
"@vue/cli-service": "^4.5.0",
"components": "^0.1.0",
"vue-template-compiler": "^2.6.11"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

@ -4,7 +4,7 @@
<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">
<link rel="icon" href="<%= BASE_URL %>logo.png">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

@ -1,28 +1,24 @@
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<keep-alive exclude="Detail">
<router-view/>
</keep-alive>
<MainTabBar/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import MainTabBar from "components/content/mainTabbar/MainTabBar";
export default {
name: 'App',
components: {
HelloWorld
MainTabBar
}
}
</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;
}
@import "./assets/css/base.css";
</style>

@ -0,0 +1,66 @@
@import "./normalize.css";
:root {
--color-text: #666;
--color-high-text: #ff5777;
--color-tint: #ff8198;
--color-background: #fff;
--font-size: 14px;
--line-height: 1.5;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
user-select: none; /* 禁止用户鼠标在页面上选中文字/图片等 */
-webkit-tap-highlight-color: transparent; /* webkit是苹果浏览器引擎tap点击highlight背景高亮color颜色颜色用数值调节 */
background: var(--color-background);
color: var(--color-text);
width: 100vw;
}
a {
color: var(--color-text);
text-decoration: none;
}
.clear-fix::after {
clear: both;
content: '';
display: block;
width: 0;
height: 0;
visibility: hidden;
}
.clear-fix {
zoom: 1;
}
.arrow-right {
border-top: 1px solid #999;
border-left: 1px solid #999;
width: 9px;
height: 9px;
background-color: transparent;
transform: rotate(135deg);
display: inline-block;
margin-left: .1rem;
}
.left {
float: left;
}
.right {
float: right;
}

@ -0,0 +1,341 @@
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="16px" height="16px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M908.288 127.488l-537.6 537.6-254.976-254.976L0 525.824l254.976 254.976 115.712 115.712L486.4 780.8l537.6-537.6z" fill="#ffffff" p-id="2923"/></svg>

After

Width:  |  Height:  |  Size: 410 B

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1540006086139" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1898" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22"><defs><style type="text/css"></style></defs><path d="M736 960a31.88 31.88 0 0 1-21.77-8.55l-448-416a32 32 0 0 1 0-46.9l448-416a32 32 0 1 1 43.55 46.9L335 512l422.77 392.55A32 32 0 0 1 736 960z" p-id="1899" fill="#515151"></path></svg>

After

Width:  |  Height:  |  Size: 566 B

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M953.395454 402.915559c-8.676613-24.556279-30.668487-42.291199-57.407478-46.220694l-222.3716-32.523741L576.974315 126.46632c-11.676947-24.065092-37.161365-39.672558-64.992223-39.672558-27.721365 0-53.151547 15.606443-64.828494 39.617299l-96.643084 197.759039-222.589564 32.633235c-26.629497 3.928472-48.566112 21.609157-57.297984 46.27493-8.622378 24.938995-2.182712 51.950186 16.806781 70.613244l163.271574 160.433946-37.925774 222.535329c-4.638647 26.356274 6.65763 52.440349 29.631878 68.102051 12.059664 8.130168 26.303063 12.441357 41.200354 12.441357 12.059664 0 23.955598-2.891863 34.651194-8.458649l193.666838-102.917998 194.431248 103.192244c23.355941 12.059664 53.260018 10.423397 75.578326-4.311189 22.646789-15.497972 33.887808-41.582047 29.30442-67.940368l-37.871539-222.533282 163.381068-160.653957C955.577143 454.91998 961.962573 427.963025 953.395454 402.915559zM896.587634 432.873872 722.675722 603.894943c-6.712889 6.603395-9.713222 15.989159-8.131191 25.211195l40.381709 237.377362c0.709151 4.202719-1.200338 8.18645-5.02034 10.80509-4.637624 3.166109-12.659321 3.329838-17.080004 1.037632L525.352611 768.203126c-8.404414-4.474918-18.444071-4.365424-26.848485 0L291.576263 878.160447c-5.129834 2.620687-12.605086 2.346441-17.080004-0.709151-1.963725-1.308809-6.438643-5.074575-5.402033-11.076266l40.435944-237.377362c1.582031-9.224082-1.419326-18.609847-8.131191-25.213241L127.486044 432.873872c-3.110851-3.055592-4.201695-7.148817-2.892887-10.859325 1.582031-4.529153 6.056949-7.80271 11.67797-8.676613l237.431597-34.814923c9.331529-1.364067 17.407462-7.258311 21.554922-15.715937L498.558361 151.45955c2.182712-4.474918 7.584746-7.476275 13.423731-7.476275 5.948479 0 11.405771 3.001357 13.58746 7.53051l103.299691 211.292264c4.14746 8.458649 12.223393 14.351869 21.554922 15.715937l237.213633 34.706453c5.675256 0.87288 10.258645 4.201695 11.787464 8.512884C900.736117 425.726078 899.698484 429.818279 896.587634 432.873872z" /></svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

@ -0,0 +1,18 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 405 c0 -8 6 -15 14 -15 21 0 23 -6 46 -136 31 -181 13 -165 187
-162 187 4 194 21 11 28 -116 4 -133 7 -136 22 -3 16 9 18 136 18 100 0 142 4
149 13 18 22 35 158 22 173 -9 11 -49 14 -180 14 -156 0 -169 1 -169 18 0 26
-20 42 -52 42 -18 0 -28 -5 -28 -15z m394 -83 c2 -4 -1 -35 -7 -67 l-12 -60
-131 -3 -132 -3 -11 64 c-6 35 -11 67 -11 70 0 10 298 9 304 -1z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 881 B

@ -0,0 +1,18 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
fill="#ff5777" stroke="none">
<path d="M0 405 c0 -8 6 -15 14 -15 21 0 23 -6 46 -136 31 -181 13 -165 187
-162 187 4 194 21 11 28 -116 4 -133 7 -136 22 -3 16 9 18 136 18 100 0 142 4
149 13 18 22 35 158 22 173 -9 11 -49 14 -180 14 -156 0 -169 1 -169 18 0 26
-20 42 -52 42 -18 0 -28 -5 -28 -15z m394 -83 c2 -4 -1 -35 -7 -67 l-12 -60
-131 -3 -132 -3 -11 64 c-6 35 -11 67 -11 70 0 10 298 9 304 -1z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 881 B

@ -0,0 +1,21 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M34 397 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3 c-63
2 -84 0 -88 -11z"/>
<path d="M234 397 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3
c-63 2 -84 0 -88 -11z"/>
<path d="M34 197 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3 c-63
2 -84 0 -88 -11z"/>
<path d="M234 197 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3
c-63 2 -84 0 -88 -11z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 902 B

@ -0,0 +1,21 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
fill="#ff5777" stroke="none">
<path d="M34 397 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3 c-63
2 -84 0 -88 -11z"/>
<path d="M234 397 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3
c-63 2 -84 0 -88 -11z"/>
<path d="M34 197 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3 c-63
2 -84 0 -88 -11z"/>
<path d="M234 197 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3
c-63 2 -84 0 -88 -11z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 902 B

@ -0,0 +1,19 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M110 339 c-97 -81 -118 -109 -81 -109 19 0 20 -7 23 -102 l3 -103 60
0 60 0 5 45 c7 55 15 70 40 70 25 0 33 -15 40 -70 l5 -45 60 0 60 0 3 102 c3
96 4 103 23 103 13 0 19 6 17 15 -4 20 -189 175 -208 174 -8 0 -58 -36 -110
-80z m186 -26 l65 -56 -3 -101 -3 -101 -30 0 c-28 0 -30 2 -33 45 -4 57 -25
80 -72 80 -47 0 -68 -23 -72 -80 -3 -43 -5 -45 -33 -45 l-30 0 -3 100 -3 100
63 57 c35 32 69 57 76 58 8 0 43 -25 78 -57z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 937 B

@ -0,0 +1,19 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
fill="#ff5777" stroke="none">
<path d="M110 339 c-97 -81 -118 -109 -81 -109 19 0 20 -7 23 -102 l3 -103 60
0 60 0 5 45 c7 55 15 70 40 70 25 0 33 -15 40 -70 l5 -45 60 0 60 0 3 102 c3
96 4 103 23 103 13 0 19 6 17 15 -4 20 -189 175 -208 174 -8 0 -58 -36 -110
-80z m186 -26 l65 -56 -3 -101 -3 -101 -30 0 c-28 0 -30 2 -33 45 -4 57 -25
80 -72 80 -47 0 -68 -23 -72 -80 -3 -43 -5 -45 -33 -45 l-30 0 -3 100 -3 100
63 57 c35 32 69 57 76 58 8 0 43 -25 78 -57z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 937 B

@ -0,0 +1,19 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M130 412 c-19 -10 -48 -36 -65 -56 -28 -35 -30 -44 -30 -116 0 -73 2
-80 33 -119 27 -33 31 -44 22 -60 -5 -11 -10 -27 -10 -35 0 -24 29 -19 39 6 7
20 15 21 101 22 87 1 93 0 101 -21 10 -26 39 -31 39 -7 0 8 -5 24 -10 35 -9
16 -5 27 22 60 28 35 33 49 36 107 4 79 -14 119 -72 166 -31 26 -47 31 -104
34 -52 2 -75 -1 -102 -16z m168 -42 c130 -79 74 -280 -78 -280 -152 0 -208
201 -78 280 43 26 113 26 156 0z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 924 B

@ -0,0 +1,19 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
fill="#ff5777" stroke="none">
<path d="M130 412 c-19 -10 -48 -36 -65 -56 -28 -35 -30 -44 -30 -116 0 -73 2
-80 33 -119 27 -33 31 -44 22 -60 -5 -11 -10 -27 -10 -35 0 -24 29 -19 39 6 7
20 15 21 101 22 87 1 93 0 101 -21 10 -26 39 -31 39 -7 0 8 -5 24 -10 35 -9
16 -5 27 22 60 28 35 33 49 36 107 4 79 -14 119 -72 166 -31 26 -47 31 -104
34 -52 2 -75 -1 -102 -16z m168 -42 c130 -79 74 -280 -78 -280 -152 0 -208
201 -78 280 43 26 113 26 156 0z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 924 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

@ -0,0 +1,38 @@
import {debounce} from "@/common/utils";
export const itemListenerMixin={
data(){
return{
itemImgListener:null,
}
},
mounted(){
const refresh = debounce(this.$refs.scroll.refresh,500)
this.itemImgListener=()=>{
refresh()
}
this.$bus.$on('itemImgLoad',this.itemImgListener)
}
}
export const backTopMixin={
data(){
return{
isShowBackTop:false,
tabOffsetTop:0,
isTabFixed:false,
}
},
methods:{
backClick(){
this.$refs.scroll.scrollTo(0,0)
},
contentScoll(position){
this.isShowBackTop=(-position.y)>1000
this.isTabFixed=(-position.y)>this.tabOffsetTop
},
}
}

@ -0,0 +1,37 @@
export function debounce(func,delay){
let timer=null
//...args多个参数 delay是延迟执行 但timer已经赋值 再次传入timer清空
return function (...args){
if(timer) clearTimeout(timer)
timer=setTimeout(()=>{
func.apply(this,args)
},delay)
}
}
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
}
function padLeftZero (str) {
return ('00' + str).substr(str.length);
}

@ -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>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

@ -0,0 +1,65 @@
<template>
<div class="wrapper" ref="wrapper">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: "Scroll",
props:{
probeType:{
type:Number,
default:0
},
pullUpLoad:{
type:Boolean,
default: false
}
},
data(){
return{
scroll:null
}
},
mounted() {
this.scroll=new BScroll(this.$refs.wrapper,{
click:true,
probeType:this.probeType,
pullUpLoad: this.pullUpLoad
})
this.scroll.on('scroll',(position)=>{
this.$emit('scroll',position)
})
this.scroll.on('pullingUp',()=>{
this.$emit('pullingUp')
})
this.scroll.scrollTo(0,0)
},
methods:{
scrollTo(x,y,time=3000){
this.scroll && this.scroll.scrollTo(x,y,time)
},
finishPullUp(){
this.scroll && this.scroll.finishPullUp()
},
refresh(){
this.scroll && this.scroll.refresh()
},
getScrolly(){
return this.scroll ? this.scroll.y : 0
}
}
}
</script>
<style scoped>
</style>

@ -0,0 +1,29 @@
<template>
<div class="nav-bar">
<div class="left"><slot name="left"></slot></div>
<div class="center"><slot name="center"></slot></div>
<div class="right"><slot name="right"></slot></div>
</div>
</template>
<script>
export default {
name: "NavBar"
}
</script>
<style scoped>
.nav-bar{
display: flex;
line-height: 44px;
height: 44px;
text-align: center;
box-shadow: 0 1px 1px rgba(100,100,100,.1);
}
.left,.right{
width:60px;
}
.center{
flex:1;
}
</style>

@ -0,0 +1,371 @@
<template>
<div id="hy-swiper">
<div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
<slot></slot>
</div>
<slot name="indicator">
</slot>
<div class="indicator">
<slot name="indicator" v-if="showIndicator && slideCount>1">
<div v-for="(item, index) in slideCount" class="indi-item" :class="{active: index === currentIndex-1}" :key="index"></div>
</slot>
</div>
</div>
</template>
<script>
export default {
name: "Swiper",
props: {
interval: {
type: Number,
default: 3000
},
animDuration: {
type: Number,
default: 300
},
moveRatio: {
type: Number,
default: 0.25
},
showIndicator: {
type: Boolean,
default: true
}
},
data: function () {
return {
slideCount: 0, //
totalWidth: 0, // swiper
swiperStyle: {}, // swiper
currentIndex: 1, // index
scrolling: false, //
}
},
mounted: function () {
// 1.DOM, Slide
setTimeout(() => {
this.handleDom();
// 2.
this.startTimer();
}, 500)
},
methods: {
/**
* 定时器操作
*/
startTimer: function () {
this.playTimer = window.setInterval(() => {
this.currentIndex++;
this.scrollContent(-this.currentIndex * this.totalWidth);
}, this.interval)
},
stopTimer: function () {
window.clearInterval(this.playTimer);
},
/**
* 滚动到正确的位置
*/
scrollContent: function (currentPosition) {
// 0.
this.scrolling = true;
// 1.
this.swiperStyle.transition ='transform '+ this.animDuration + 'ms';
this.setTransform(currentPosition);
// 2.
this.checkPosition();
// 4.
this.scrolling = false
},
/**
* 校验正确的位置
*/
checkPosition: function () {
window.setTimeout(() => {
// 1.
this.swiperStyle.transition = '0ms';
if (this.currentIndex >= this.slideCount + 1) {
this.currentIndex = 1;
this.setTransform(-this.currentIndex * this.totalWidth);
} else if (this.currentIndex <= 0) {
this.currentIndex = this.slideCount;
this.setTransform(-this.currentIndex * this.totalWidth);
}
// 2.
this.$emit('transitionEnd', this.currentIndex-1);
}, this.animDuration)
},
/**
* 设置滚动的位置
*/
setTransform: function (position) {
this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`;
this.swiperStyle['-webkit-transform'] = `translate3d(${position}px), 0, 0`;
this.swiperStyle['-ms-transform'] = `translate3d(${position}px), 0, 0`;
},
/**
* 操作DOM, 在DOM前后添加Slide
*/
handleDom: function () {
// 1.
let swiperEl = document.querySelector('.swiper');
let slidesEls = swiperEl.getElementsByClassName('slide');
// 2.
this.slideCount = slidesEls.length;
// 3.1, slide
if (this.slideCount > 1) {
let cloneFirst = slidesEls[0].cloneNode(true);
let cloneLast = slidesEls[this.slideCount - 1].cloneNode(true);
swiperEl.insertBefore(cloneLast, slidesEls[0]);
swiperEl.appendChild(cloneFirst);
this.totalWidth = swiperEl.offsetWidth;
this.swiperStyle = swiperEl.style;
}
// 4.swiper, ()
this.setTransform(-this.totalWidth);
},
/**
* 拖动事件的处理
*/
touchStart: function (e) {
// 1.,
if (this.scrolling) return;
// 2.
this.stopTimer();
// 3.
this.startX = e.touches[0].pageX;
},
touchMove: function (e) {
// 1.
this.currentX = e.touches[0].pageX;
this.distance = this.currentX - this.startX;
let currentPosition = -this.currentIndex * this.totalWidth;
let moveDistance = this.distance + currentPosition;
// 2.
this.setTransform(moveDistance);
},
touchEnd: function (e) {
// 1.
let currentMove = Math.abs(this.distance);
// 2.
if (this.distance === 0) {
return
} else if (this.distance > 0 && currentMove > this.totalWidth * this.moveRatio) { // 0.5
this.currentIndex--
} else if (this.distance < 0 && currentMove > this.totalWidth * this.moveRatio) { // 0.5
this.currentIndex++
}
// 3.
this.scrollContent(-this.currentIndex * this.totalWidth);
// 4.
this.startTimer();
},
/**
* 控制上一个, 下一个
*/
previous: function () {
this.changeItem(-1);
},
next: function () {
this.changeItem(1);
},
changeItem: function (num) {
// 1.
this.stopTimer();
// 2.index
this.currentIndex += num;
this.scrollContent(-this.currentIndex * this.totalWidth);
// 3.
this.startTimer();
}
}
}
</script>
<style scoped>
#hy-swiper {
overflow: hidden;
position: relative;
}
.swiper {
display: flex;
}
.indicator {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
bottom: 8px;
}
.indi-item {
box-sizing: border-box;
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #fff;
line-height: 8px;
text-align: center;
font-size: 12px;
margin: 0 5px;
}
.indi-item.active {
background-color: rgba(212,62,46,1.0);
}
</style>

@ -0,0 +1,22 @@
<template>
<div class="slide">
<slot></slot>
</div>
</template>
<script>
export default {
name: "Slide"
}
</script>
<style scoped>
.slide {
width: 100%;
flex-shrink: 0;
}
.slide img {
width: 100%;
}
</style>

@ -0,0 +1,6 @@
import Swiper from './Swiper'
import SwiperItem from './SwiperItem'
export {
Swiper, SwiperItem
}

@ -0,0 +1,24 @@
<template>
<div id="tab-bar">
<slot></slot>
</div>
</template>
<script>
export default {
name: "TabBar"
}
</script>
<style scoped>
#tab-bar{
display: flex;
background-color: #f6f6f6;
position: fixed;
left: 0;
right: 0;
bottom:0;
box-shadow: 0 -3px 1px rgba(100,100,100,.1);
}
</style>

@ -0,0 +1,53 @@
<template>
<div class="tab-bar-item" @click="itemClick">
<div v-if="!isActive"><slot name="item-icon"></slot></div>
<div v-else><slot name="item-icon-active"></slot></div>
<div :style="activeStyle"><slot name="item-text"></slot></div>
</div>
</template>
<script>
export default {
name: "TabBarItem",
props:{
path:String,
activeColor:{
type:String,
default:'red'
}
},
data(){
return{
// isActive:true
}
},
computed:{
isActive(){
return this.$route.path.indexOf(this.path)!==-1
},
activeStyle(){
return this.isActive ? {color:this.activeColor} : {}
}
},
methods:{
itemClick(){
this.$router.replace(this.path)
}
}
}
</script>
<style scoped>
.tab-bar-item{
flex:1;
text-align: center;
height: 49px;
}
.tab-bar-item img{
width:24px;
height:24px;
margin-top: 3px;
vertical-align: middle;
margin-bottom: 2px;
}
</style>

@ -0,0 +1,23 @@
<template>
<div class="back-Top" >
<img src="@/assets/img/common/top.png" alt="">
</div>
</template>
<script>
export default {
name: "backTop",
}
</script>
<style scoped>
.back-Top{
position: fixed;
right: 8px;
bottom: 55px;
}
.back-Top img{
width: 48px;
height: 48px;
}
</style>

@ -0,0 +1,32 @@
<template>
<div class="goods">
<GoodsListItem v-for="(item, index) in goods" :key="index" :goodsItem="item"/>
</div>
</template>
<script>
import GoodsListItem from "@/components/content/goods/GoodsListItem";
export default {
name: "GoodsList",
components:{
GoodsListItem
},
props:{
goods:{
type:Array,
default(){
return []
}
}
}
}
</script>
<style scoped>
.goods{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
</style>

@ -0,0 +1,85 @@
<template>
<div class="goods-items" @click="itemClick">
<img :src="showImage" alt="" @load="imageLoad">
<div class="goods-info">
<p>{{goodsItem.title}}</p>
<span class="price">{{goodsItem.price}}</span>
<span class="collect">{{goodsItem.cfav}}</span>
</div>
</div>
</template>
<script>
export default {
name: "GoodsListItem",
props:{
goodsItem:{
type:Object,
default(){
return {}
}
}
},
methods:{
imageLoad(){
this.$bus.$emit('itemImageLoad')
},
itemClick(){
this.$router.push('/detail/'+this.goodsItem.iid)
}
},
computed:{
showImage(){
return this.goodsItem.image || this.goodsItem.show.img
}
}
}
</script>
<style scoped>
.goods-items {
padding-bottom: 40px;
position: relative;
width:48%;
}
.goods-items img {
width: 100%;
}
.goods-info {
font-size: 12px;
position: absolute;
bottom: 5px;
left: 0;
right: 0;
overflow: hidden;
text-align: center;
}
.goods-info p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 3px;
}
.goods-info .price {
color: var(--color-high-text);
margin-right: 20px;
}
.goods-info .collect {
position: relative;
}
.goods-info .collect::before {
content: '';
position: absolute;
left: -15px;
top: 0;
width: 14px;
height: 14px;
background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
}
</style>

@ -0,0 +1,42 @@
<template>
<tab-bar>
<tab-bar-item path="/home" activeColor="red">
<img slot="item-icon" src="~assets/img/tabbar/home.svg" alt="">
<img slot="item-icon-active" src="~assets/img/tabbar/home_active.svg" alt="">
<div slot="item-text">首页</div>
</tab-bar-item>
<tab-bar-item path="/category" activeColor="red">
<img slot="item-icon" src="~assets/img/tabbar/category.svg" alt="">
<img slot="item-icon-active" src="~assets/img/tabbar/category_active.svg" alt="">
<div slot="item-text">分类</div>
</tab-bar-item>
<tab-bar-item path="/cart" activeColor="red">
<img slot="item-icon" src="~assets/img/tabbar/cart.svg" alt="">
<img slot="item-icon-active" src="~assets/img/tabbar/cart_active.svg" alt="">
<div slot="item-text">购物车</div>
</tab-bar-item>
<tab-bar-item path="/profile" activeColor="red">
<img slot="item-icon" src="~assets/img/tabbar/profile.svg" alt="">
<img slot="item-icon-active" src="~assets/img/tabbar/profile_active.svg" alt="">
<div slot="item-text">我的</div>
</tab-bar-item>
</tab-bar>
</template>
<script>
import TabBar from "@/components/common/tabbar/TabBar";
import TabBarItem from "@/components/common/tabbar/TabBarItem";
export default {
name: "MainTabBar",
components:{
TabBar,
TabBarItem
}
}
</script>
<style scoped>
</style>

@ -0,0 +1,55 @@
<template>
<div class="tab-control">
<div v-for="(item,index) in titles"
class="tab-control-item" :class="{active:index===currentIndex}" @click="itemclick(index)">
<span>{{item}}</span>
</div>
</div>
</template>
<script>
export default {
name: "TabControl",
props:{
titles:{
type:Array,
default(){
return []
}
}
},
data(){
return{
currentIndex:0
}
},
methods:{
itemclick(index){
this.currentIndex=index;
this.$emit('tabClick',index);
}
}
}
</script>
<style scoped>
.tab-control{
display: flex;
text-align: center;
font-size: 15px;
height: 40px;
line-height: 40px;
background-color: #fff;
z-index: 9;
}
.tab-control-item{
flex:1;
}
.tab-control-item span{
padding: 5px;
}
.active span{
border-bottom: 3px solid var(--color-tint);
}
</style>

@ -1,8 +1,11 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
Vue.prototype.$bus = new Vue()
new Vue({
render: h => h(App),
router,
}).$mount('#app')

@ -0,0 +1,50 @@
import {request} from "@/network/request";
export function getDetail(iid){
return request({
url:'/detail',
params:{
iid
}
})
}
export function getRecommend(){
return request({
url:'/recommend'
})
}
export class Goods{
constructor(itemInfo, columns, services) {
this.title = itemInfo.title;
this.desc = itemInfo.desc;
this.newPrice = itemInfo.price;
this.oldPrice = itemInfo.oldPrice;
this.discount = itemInfo.discountDesc;
this.columns = columns;
this.services = services;
this.nowPrice = itemInfo.highNowPrice;
}
}
export class Shop {
constructor(shopInfo) {
this.logo = shopInfo.shopLogo;
this.name = shopInfo.name;
this.fans = shopInfo.cFans;
this.sells = shopInfo.cSells;
this.score = shopInfo.score;
this.goodsCount = shopInfo.cGoods
}
}
export class GoodsParam {
constructor(info, rule) {
// 注: images可能没有值(某些商品有值, 某些没有值)
this.image = info.images ? info.images[0] : '';
this.infos = info.set;
this.sizes = rule.tables;
}
}

@ -0,0 +1,18 @@
import {request} from "@/network/request";
export function getHomeMutidata(){
return request({
url:'/home/multidata'
})
}
export function getHomeGoods(type,page){
return request({
url:'/home/data',
params:{
type,
page
}
})
}

@ -0,0 +1,26 @@
import axios from 'axios'
export function request(config){
const instance =axios.create({
baseURL:'http://152.136.185.210:8000/api/w6',
timeout:5000
})
// //拦截
// instance.interceptors.request.use(config=>{
// console.log(config);
// return config
// },
// err=>{
// // console.log(err)
// })
//
// instance.interceptors.request.use(res=>{
// return res.get
// },err=>{
// console.log(err);
// })
return instance(config)
}

@ -0,0 +1,41 @@
import Vue from 'vue'
import Router from 'vue-router'
const Home=()=>import('../views/home/Home')
const Category=()=>import('../views/category/Category')
const Cart=()=>import('../views/cart/Cart')
const Profile=()=>import('../views/profile/Profile')
const Detail=()=>import('../views/detail/Detail')
Vue.use(Router)
const routes=[
{
path:'',
redirect:'/home'
},
{
path:'/home',
component:Home
},
{
path:'/category',
component:Category
},
{
path:'/cart',
component:Cart
},
{
path: '/profile',
component: Profile
},
{
path: '/detail/:iid',
component: Detail
}
]
const router =new Router({
routes,
mode:'history'
})
export default router

@ -0,0 +1,15 @@
<template>
<div>
<h2>购物车</h2>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style>

@ -0,0 +1,152 @@
<template>
<div class="wrapper" ref="aaaa">
<ul >
<button @click="btnClick"></button>
<li>分类列表1</li>
<li>分类列表2</li>
<li>分类列表3</li>
<li>分类列表4</li>
<li>分类列表5</li>
<li>分类列表6</li>
<li>分类列表7</li>
<li>分类列表8</li>
<li>分类列表9</li>
<li>分类列表10</li>
<li>分类列表11</li>
<li>分类列表12</li>
<li>分类列表13</li>
<li>分类列表14</li>
<li>分类列表15</li>
<li>分类列表16</li>
<li>分类列表17</li>
<li>分类列表18</li>
<li>分类列表19</li>
<li>分类列表20</li>
<li>分类列表21</li>
<li>分类列表22</li>
<li>分类列表23</li>
<li>分类列表24</li>
<li>分类列表25</li>
<li>分类列表26</li>
<li>分类列表27</li>
<li>分类列表28</li>
<li>分类列表29</li>
<li>分类列表30</li>
<li>分类列表31</li>
<li>分类列表32</li>
<li>分类列表33</li>
<li>分类列表34</li>
<li>分类列表35</li>
<li>分类列表36</li>
<li>分类列表37</li>
<li>分类列表38</li>
<li>分类列表39</li>
<li>分类列表40</li>
<li>分类列表41</li>
<li>分类列表42</li>
<li>分类列表43</li>
<li>分类列表44</li>
<li>分类列表45</li>
<li>分类列表46</li>
<li>分类列表47</li>
<li>分类列表48</li>
<li>分类列表49</li>
<li>分类列表50</li>
<li>分类列表51</li>
<li>分类列表52</li>
<li>分类列表53</li>
<li>分类列表54</li>
<li>分类列表55</li>
<li>分类列表56</li>
<li>分类列表57</li>
<li>分类列表58</li>
<li>分类列表59</li>
<li>分类列表60</li>
<li>分类列表61</li>
<li>分类列表62</li>
<li>分类列表63</li>
<li>分类列表64</li>
<li>分类列表65</li>
<li>分类列表66</li>
<li>分类列表67</li>
<li>分类列表68</li>
<li>分类列表69</li>
<li>分类列表70</li>
<li>分类列表71</li>
<li>分类列表72</li>
<li>分类列表73</li>
<li>分类列表74</li>
<li>分类列表75</li>
<li>分类列表76</li>
<li>分类列表77</li>
<li>分类列表78</li>
<li>分类列表79</li>
<li>分类列表80</li>
<li>分类列表81</li>
<li>分类列表82</li>
<li>分类列表83</li>
<li>分类列表84</li>
<li>分类列表85</li>
<li>分类列表86</li>
<li>分类列表87</li>
<li>分类列表88</li>
<li>分类列表89</li>
<li>分类列表90</li>
<li>分类列表91</li>
<li>分类列表92</li>
<li>分类列表93</li>
<li>分类列表94</li>
<li>分类列表95</li>
<li>分类列表96</li>
<li>分类列表97</li>
<li>分类列表98</li>
<li>分类列表99</li>
<li>分类列表100</li>
</ul>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: "Category",
data(){
return {
scroll:null
}
},
created() {
},
mounted() {
this.scroll=new BScroll(document.querySelector('.wrapper'),{
probeType:3,
pullUpLoad:true,
})
this.scroll.on('scroll',(position)=>{
// console.log(position);
})
this.scroll.on('pullingUp',()=>{
console.log('上拉加载更多');
})
},
methods:{
btnClick(){
console.log('ctnClick');
}
}
}
</script>
<style scoped>
.wrapper{
height: 150px;
background-color: red;
/*overflow: hidden;*/
overflow-y:scroll;
}
</style>

@ -0,0 +1,168 @@
<template>
<div id="detail" >
<DetailNewBar class="detail-nav" @titleClick="titleClick" ref="nav"/>
<scroll class="content"
ref="scroll"
@scroll="totalScroll"
:probe-type="3" >
<DetailSwiper :top-images="topImages"/>
<DetailBaseInfo :goods="goods"/>
<DetailShopInfo :shop="shop" />
<DetailGoodsInfo :detail-info="detailInfo" @detailImageload="detailImageload"/>
<DetailParamInfo ref="params" :param-info="paramInfo"/>
<DetailCommentInfo ref="comment" :comment-info="commentInfo"/>
<GoodsList ref="recommend" :goods="recommends"></GoodsList>
</scroll>
<back-top @click.native="backClick" v-show="isShowBackTop"/>
<detail-bottom-bar @addToCart="addToCart"/>
</div>
</template>
<script>
import DetailNewBar from "@/views/detail/childComps/DetailNewBar";
import DetailSwiper from "@/views/detail/childComps/DetailSwiper";
import DetailBaseInfo from "@/views/detail/childComps/DetailBaseInfo";
import DetailShopInfo from "@/views/detail/childComps/DetailShopInfo";
import DetailGoodsInfo from "@/views/detail/childComps/DetailGoodsInfo";
import DetailParamInfo from "@/views/detail/childComps/DetailParamInfo";
import DetailCommentInfo from "@/views/detail/childComps/DetailCommentInfo";
import DetailBottomBar from "@/views/detail/childComps/DetailBottomBar";
import backTop from "@/components/content/backTop/backTop";
import GoodsList from "@/components/content/goods/GoodsList";
import scroll from "@/components/common/Scroll/Scroll";
import {itemListenerMixin,backTopMixin} from "@/common/mixin";
import {debounce} from "@/common/utils";
import {getDetail, Goods, Shop, GoodsParam, getRecommend} from "@/network/detail";
export default {
name: "Detail",
components: {
DetailNewBar,
DetailSwiper,
DetailBaseInfo,
DetailShopInfo,
DetailGoodsInfo,
DetailParamInfo,
DetailCommentInfo,
DetailBottomBar,
backTop,
GoodsList,
scroll,
},
mixins: [itemListenerMixin,backTopMixin],
data() {
return {
iid: null,
topImages: [],
goods: {},
shop: {},
detailInfo: {},
paramInfo: {},
commentInfo: {},
recommends: [],
themeTopYs: [],
getThemeTopY: null,
currentIndex:0,
}
},
created() {
//homeiid
this.iid = this.$route.params.iid
//
getDetail(this.iid).then(res => {
const data = res.data.result
//
this.topImages = data.itemInfo.topImages
//
this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
//
this.shop = new Shop(data.shopInfo)
//穿
this.detailInfo = data.detailInfo
//
this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
if (data.rate.list) {
this.commentInfo = data.rate.list[0];
}
//
this.getThemeTopY = debounce(() => {
this.themeTopYs = []
this.themeTopYs.push(0);
this.themeTopYs.push(this.$refs.params.$el.offsetTop)
this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
this.themeTopYs.push(Number.MAX_VALUE)
}, 500)
})
//
getRecommend().then(res => {
this.recommends = res.data.data.list
})
},
mounted() {
},
destroyed() {
//keep-liveactivated使
this.$bus.$off('itemImgLoad', this.itemImgListener)
},
methods: {
//
detailImageload() {
this.itemImgListener()
this.getThemeTopY()
},
//
titleClick(index) {
this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 1000);
},
//
positionScroll(position) {
const positionY = -position.y
let length = this.themeTopYs.length
for (let i = 0; i < length-1; i++) {
if(this.currentIndex!==i&&(positionY>=this.themeTopYs[i]&&positionY<this.themeTopYs[i+1]))
{
this .currentIndex=i;
this.$refs.nav.currentIndex=this.currentIndex
}
}
},
//mixin退
totalScroll(position){
this.positionScroll(position)
this.contentScoll(position)
},
//
addToCart(){
console.log('----');
}
}
}
</script>
<style scoped>
#detail{
position: relative;
z-index: 9;
background-color: #ffffff;
height: 100vh;
}
.detail-nav{
position: relative;
z-index: 9;
background-color: #ffffff;
}
.content{
height: calc(100% - 96px);
position: relative;
}
</style>

@ -0,0 +1,103 @@
<template>
<div v-if="Object.keys(goods).length !== 0" class="base-info">
<div class="info-title">{{goods.title}}</div>
<div class="info-price">
<span class="n-price">{{goods.newPrice}}</span>
<span class="o-price">{{goods.oldPrice}}</span>
<span class="discount">{{goods.discount}}</span>
</div>
<div class="info-other">
<span>{{goods.columns[0]}}</span>
<span>{{goods.columns[1]}}</span>
<span>{{goods.services[goods.services.length-1].name}}</span>
</div>
<div class="info-service">
<span class="info-service-item" v-for="index in goods.services.length-1" :key="index">
<img :src="goods.services[index-1].icon">
<span>{{goods.services[index-1].name}}</span>
</span>
</div>
</div>
</template>
<script>
export default {
name: "DetailBaseInfo",
props: {
goods: {
type: Object,
default(){
return []
}
}
}
}
</script>
<style scoped>
.base-info {
margin-top: 15px;
padding: 0 8px;
color: #999;
border-bottom: 5px solid #f2f5f8;
}
.info-title {
color: #222
}
.info-price {
margin-top: 10px;
}
.info-price .n-price {
font-size: 24px;
color: var(--color-high-text);
}
.info-price .o-price {
font-size: 13px;
margin-left: 5px;
text-decoration: line-through;
}
.info-price .discount {
font-size: 12px;
padding: 2px 5px;
color: #fff;
background-color: var(--color-high-text);
border-radius: 8px;
margin-left: 5px;
/*让元素上浮一些: 使用相对定位即可*/
position: relative;
top: -8px;
}
.info-other {
margin-top: 15px;
line-height: 30px;
display: flex;
font-size: 13px;
border-bottom: 1px solid rgba(100,100,100,.1);
justify-content: space-between;
}
.info-service {
display: flex;
justify-content: space-between;
line-height: 60px;
}
.info-service-item img {
width: 10px;
height: 10px;
position: relative;
top: 2px;
}
.info-service-item span {
font-size: 13px;
color: #333;
}
</style>

@ -0,0 +1,91 @@
<template>
<div class="bottom-bar">
<div class="bar-item bar-left">
<div>
<i class="icon service"></i>
<span class="text">客服</span>
</div>
<div>
<i class="icon shop"></i>
<span class="text">店铺</span>
</div>
<div>
<i class="icon select"></i>
<span class="text">收藏</span>
</div>
</div>
<div class="bar-item bar-right">
<div class="cart" @click="addToCart"></div>
<div class="buy">购买</div>
</div>
</div>
</template>
<script>
export default {
name: "DetailBottomBar",
methods: {
addToCart() {
this.$emit('addToCart')
}
}
}
</script>
<style scoped>
.bottom-bar {
height: 58px;
position: fixed;
background-color: #fff;
left: 0;
right: 0;
bottom: 0;
display: flex;
text-align: center;
}
.bar-item {
flex: 1;
display: flex;
}
.bar-item>div {
flex: 1;
}
.bar-left .text {
font-size: 13px;
}
.bar-left .icon {
display: block;
width: 22px;
height: 22px;
margin: 10px auto 3px;
background: url("~assets/img/detail/detail_bottom.png") 0 0/100%;
}
.bar-left .service {
background-position:0 -54px;
}
.bar-left .shop {
background-position:0 -98px;
}
.bar-right {
font-size: 15px;
color: #fff;
line-height: 58px;
}
.bar-right .cart {
background-color: #ffe817;
color: #333;
}
.bar-right .buy {
background-color: #f69;
}
</style>

@ -0,0 +1,118 @@
<template>
<div>
<div v-if="Object.keys(commentInfo).length !== 0" class="comment-info">
<div class="info-header">
<div class="header-title">用户评价</div>
<div class="header-more">
更多
<i class="arrow-right"></i>
</div>
</div>
<div class="info-user">
<img :src="commentInfo.user.avatar" alt="">
<span>{{commentInfo.user.uname}}</span>
</div>
<div class="info-detail">
<p>{{commentInfo.content}}</p>
<div class="info-other">
<span class="date">{{commentInfo.created | showDate}}</span>
<span>{{commentInfo.style}}</span>
</div>
<div class="info-imgs">
<img :src="item" v-for="(item, index) in commentInfo.images">
</div>
</div>
</div>
</div>
</template>
<script>
import {formatDate} from "@/common/utils";
export default {
name: "DetailCommentInfo",
props: {
commentInfo: {
type: Object,
}
},
filters: {
showDate: function (value) {
let date = new Date(value*1000);
return formatDate(date, 'yyyy-MM-dd')
}
}
}
</script>
<style scoped>
.comment-info {
padding: 5px 12px;
color: #333;
border-bottom: 5px solid #f2f5f8;
}
.info-header {
height: 50px;
line-height: 50px;
border-bottom: 1px solid rgba(0,0,0,.1);
}
.header-title {
float: left;
font-size: 15px;
}
.header-more {
float: right;
margin-right: 10px;
font-size: 13px;
}
.info-user {
padding: 10px 0 5px;
}
.info-user img {
width: 42px;
height: 42px;
border-radius: 50%;
}
.info-user span {
position: relative;
font-size: 15px;
top: -15px;
margin-left: 10px;
}
.info-detail {
padding: 0 5px 15px;
}
.info-detail p {
font-size: 14px;
color: #777;
line-height: 1.5;
}
.info-detail .info-other {
font-size: 12px;
color: #999;
margin-top: 10px;
}
.info-other .date {
margin-right: 8px;
}
.info-imgs {
margin-top: 10px;
}
.info-imgs img {
width: 70px;
height: 70px;
margin-right: 5px;
}
</style>

@ -0,0 +1,90 @@
<template>
<div v-if="Object.keys(detailInfo).length !== 0" class="goods-info" >
<div class="info-desc clear-fix">
<div class="start">
</div>
<div class="desc">{{detailInfo.desc}}</div>
<div class="end"></div>
</div>
<div class="info-key">{{detailInfo.detailImage[0].key}}</div>
<div class="info-list">
<img v-for="(item, index) in detailInfo.detailImage[0].list" :key="index" :src="item" alt="" @load="imgLoad">
</div>
</div>
</template>
<script>
export default {
name: "DetailGoodsInfo",
props: {
detailInfo: {
type: Object
}
},
data(){
return{
rounter:0,
imagesLength:0,
}
},
methods: {
imgLoad() {
this.$emit('detailImageload')
}
}
}
</script>
<style scoped>
.goods-info {
padding: 20px 0;
border-bottom: 5px solid #f2f5f8;
}
.info-desc {
padding: 0 15px;
}
.info-desc .start, .info-desc .end {
width: 90px;
height: 1px;
background-color: #a3a3a5;
position: relative;
}
.info-desc .start {
float: left;
}
.info-desc .end {
float: right;
}
.info-desc .start::before, .info-desc .end::after {
content: '';
position: absolute;
width: 5px;
height: 5px;
background-color: #333;
bottom: 0;
}
.info-desc .end::after {
right: 0;
}
.info-desc .desc {
padding: 15px 0;
font-size: 14px;
}
.info-key {
margin: 10px 0 10px 15px;
color: #333;
font-size: 15px;
}
.info-list img {
width: 100%;
}
</style>

@ -0,0 +1,56 @@
<template>
<nav-bar>
<div slot="left" class="back" @click="backClick">
<img src="~assets/img/common/back.svg" alt="">
</div>
<div slot="center" class="title">
<div v-for="(item,index) in titles"
class="title-item"
:class="{active:index===currentIndex}" @click="titleClick(index)">
{{item}}
</div>
</div>
</nav-bar>
</template>
<script>
import NavBar from "@/components/common/navbar/NavBar";
export default {
name: "DetailNewBar",
components: {
NavBar
},
data(){
return{
titles:['商品','参数','评论','推荐'],
currentIndex:0,
}
},
methods:{
titleClick(index){
this.currentIndex=index;
this.$emit('titleClick',index)
},
backClick(){
this.$router.back()
}
}
}
</script>
<style scoped>
.title{
display: flex;
font-size: 13px;
}
.title-item{
flex:1;
}
.active{
color: var(--color-high-text);
}
.back img{
margin-top: 12px;
}
</style>

@ -0,0 +1,68 @@
<template>
<div class="param-info" v-if="Object.keys(paramInfo).length !== 0">
<table v-for="(table, index) in paramInfo.sizes"
class="info-size" :key="index">
<tr v-for="(tr, indey) in table" :key="indey">
<td v-for="(td, indez) in tr" :key="indez">{{td}}</td>
</tr>
</table>
<table class="info-param">
<tr v-for="(info, index) in paramInfo.infos">
<td class="info-param-key">{{info.key}}</td>
<td class="param-value">{{info.value}}</td>
</tr>
</table>
<div class="info-img" v-if="paramInfo.image.length !== 0">
<img :src="paramInfo.image" alt="">
</div>
</div>
</template>
<script>
export default {
name: "DetailParamInfo",
props: {
paramInfo: {
type: Object
}
}
}
</script>
<style scoped>
.param-info {
padding: 20px 15px;
font-size: 14px;
border-bottom: 5px solid #f2f5f8;
}
.param-info table {
width: 100%;
border-collapse: collapse;
}
.param-info table tr {
height: 42px;
}
.param-info table tr td {
border-bottom: 1px solid rgba(100,100,100,.1);
}
.info-param-key {
/*当value的数据量比较大的时候, 会挤到key,所以给一个固定的宽度*/
width: 95px;
}
.info-param {
border-top: 1px solid rgba(0,0,0,.1);
}
.param-value {
color: #eb4868
}
.info-img img {
width: 100%;
}
</style>

@ -0,0 +1,157 @@
<template>
<div class="shop-info">
<div class="shop-top">
<img :src="shop.logo">
<span class="title">{{shop.name}}</span>
</div>
<div class="shop-middle">
<div class="shop-middle-item shop-middle-left">
<div class="info-sells">
<div class="sells-count">
{{shop.sells | sellCountFilter}}
</div>
<div class="sells-text">总销量</div>
</div>
<div class="info-goods">
<div class="goods-count">
{{shop.goodsCount}}
</div>
<div class="goods-text">全部宝贝</div>
</div>
</div>
<div class="shop-middle-item shop-middle-right">
<table>
<tr v-for="(item, index) in shop.score" :key="index">
<td>{{item.name}}</td>
<td class="score" :class="{'score-better': item.isBetter}">{{item.score}}</td>
<td class="better" :class="{'better-more': item.isBetter}"><span>{{item.isBetter ? '高':'低'}}</span></td>
</tr>
</table>
</div>
</div>
<div class="shop-bottom">
<div class="enter-shop">进店逛逛</div>
</div>
</div>
</template>
<script>
export default {
name: "DetailShopInfo",
props: {
shop: {
type: Object,
default(){
return []
}
}
},
filters: {
sellCountFilter: function (value) {
if (value < 10000) return value;
return (value/10000).toFixed(1) + '万'
}
}
}
</script>
<style scoped>
.shop-info {
padding: 25px 8px;
border-bottom: 5px solid #f2f5f8;
}
.shop-top {
line-height: 45px;
/* 让元素垂直中心对齐 */
display: flex;
align-items: center;
}
.shop-top img {
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,.1);
}
.shop-top .title {
margin-left: 10px;
vertical-align: center;
}
.shop-middle {
margin-top: 15px;
display: flex;
align-items: center;
}
.shop-middle-item {
flex: 1;
}
.shop-middle-left {
display: flex;
justify-content: space-evenly;
color: #333;
text-align: center;
border-right: 1px solid rgba(0,0,0,.1);
}
.sells-count, .goods-count {
font-size: 18px;
}
.sells-text, .goods-text {
margin-top: 10px;
font-size: 12px;
}
.shop-middle-right {
font-size: 13px;
color: #333;
}
.shop-middle-right table {
width: 120px;
margin-left: 30px;
}
.shop-middle-right table td {
padding: 5px 0;
}
.shop-middle-right .score {
color: #5ea732;
}
.shop-middle-right .score-better {
color: #f13e3a;
}
.shop-middle-right .better span {
background-color: #5ea732;
color: #fff;
text-align: center;
}
.shop-middle-right .better-more span {
background-color: #f13e3a;
}
.shop-bottom {
text-align: center;
margin-top: 10px;
}
.enter-shop {
display: inline-block;
font-size: 14px;
background-color: #f2f5f8;
width: 150px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 10px;
}
</style>

@ -0,0 +1,35 @@
<template>
<swiper class="swiper-item">
<swiper-item v-for="(item,index) in topImages">
<img :src="item" :key="index" alt="">
</swiper-item>
</swiper>
</template>
<script>
import {Swiper,SwiperItem} from '@/components/common/swiper'
export default {
name: "DetailSwiper",
props:{
topImages:{
type:Array,
default(){
return []
}
}
},
components:{
SwiperItem,
Swiper,
},
}
</script>
<style scoped>
.swiper-item{
height: 200px;
overflow: hidden;
}
</style>

@ -0,0 +1,173 @@
<template>
<div class="home">
<NavBar class="nav-bar"><div slot="center">购物街</div> </NavBar>
<TabControl :titles="['流行','新款','精选']"
@tabClick="tabClick"
ref="tabControl1"
class="tab-control"
v-show="isTabFixed"></TabControl>
<scroll class="content" ref="scroll"
:probe-type="3"
@scroll="contentScoll"
:pull-up-load="true"
@pullingUp="loadMore">
<home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
<home-recommend-view :recommends="recommends"></home-recommend-view>
<HomefeatureView></HomefeatureView>
<TabControl :titles="['流行','新款','精选']"
@tabClick="tabClick"
ref="tabControl2"
class="tab-control"></TabControl>
<GoodsList :goods="showGoods"></GoodsList>
</scroll>
<back-top @click.native="backClick" v-show="isShowBackTop"/>
</div>
</template>
<script>
import NavBar from "@/components/common/navbar/NavBar";
import scroll from "@/components/common/Scroll/Scroll";
import TabControl from "@/components/content/tabControl/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";
import GoodsListItem from "@/components/content/goods/GoodsListItem";
import backTop from "@/components/content/backTop/backTop";
import HomeSwiper from "./childComps/HomeSwiper";
import HomeRecommendView from "./childComps/HomeRecommendView";
import HomefeatureView from "./childComps/HomefeatureView";
import {getHomeGoods,getHomeMutidata} from "@/network/home";
import {itemListenerMixin,backTopMixin} from "@/common/mixin";
export default {
name: "Home",
components: {
NavBar,
scroll,
TabControl,
GoodsList,
GoodsListItem,
backTop,
HomeSwiper,
HomeRecommendView,
HomefeatureView,
},
data(){
return{
banners:[],
recommends:[],
goods:{
'pop':{page:0,list:[]},
'new':{page:0,list:[]},
'sell':{page:0,list:[]},
},
currentType:'pop',
// result:null
}
},
mixins:[itemListenerMixin,backTopMixin],
//Dom
created() {
this.getHomeGoods('pop')
this.getHomeGoods('new')
this.getHomeGoods('sell')
getHomeMutidata().then(res=>{
//
this.banners=res.data.data.banner.list;
//
this.recommends=res.data.data.recommend.list;
})
},
mounted() {
},
methods:{
//
getHomeGoods(type){
const page=this.goods[type].page+1
getHomeGoods(type,page).then(res=>{
this.goods[type].list.push(...res.data.data.list)
this.goods[type].page+=1
this.$refs.scroll.finishPullUp()
})
},
//
tabClick(index){
switch (index){
case 0:
this.currentType='pop'
break
case 1:
this.currentType='new'
break
case 2:
this.currentType='sell'
break
}
//
this.$refs.tabControl1.currentIndex=index;
this.$refs.tabControl2.currentIndex=index;
},
//
loadMore(){
this.getHomeGoods(this.currentType)
this.$refs.scroll.scroll.refresh()
},
//
swiperImageLoad(){
this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop
}
},
computed:{
showGoods(){
return this.goods[this.currentType].list
},
//
activated(){
this.$refs.scroll.scrollTo(0,this.saveY,0)
this.$refs.scroll.refresh()
},
deactivated(){
this.saveY = this.$refs.scroll.getScrolly()
//
this.$bus.$off('itemImgLoad',this.itemImgListener)
}
}
}
</script>
<style scoped>
.home{
height: 100vh;
position: relative;
}
.nav-bar {
background-color: var(--color-tint);
color: #fff;
/*font-weight: 700;*/
/*position: fixed;*/
/*left: 0;*/
/*right: 0;*/
/*top:0;*/
/*z-index: 9;*/
}
.content{
left: 0;
right: 0;
top:44px;
bottom: 49px;
overflow: hidden;
position: absolute;
}
/*.content{*/
/* height:calc(100% - 93px);*/
/* overflow: hidden;*/
/* margin-top: 44px;*/
/*}*/
.tab-control{
position: relative;
z-index: 9;
}
</style>

@ -0,0 +1,42 @@
<template>
<div class="recommends">
<div v-for="item in recommends" class="recommends-item">
<a :href="item.link">
<img :src="item.image" alt="">
<div>{{item.title}}</div>
</a>
</div>
</div>
</template>
<script>
export default {
name: "HomeRecommendView",
props:{
recommends:{
type:Array,
default() {
return [];
}
}
}
}
</script>
<style scoped>
.recommends{
display: flex;
width: 100%;
text-align: center;
font-size: 12px;
padding: 10px 0 20px;
border-bottom: 8px solid #eee;
}
.recommends-item{
flex:1;
}
.recommends-item img{
width: 65px;
height: 65px;
}
</style>

@ -0,0 +1,45 @@
<template>
<swiper>
<swiperItem v-for="item in banners">
<a :href="item.link" >
<img :src="item.image" alt="" @load="imageLoad">
</a>
</swiperItem>
</swiper>
</template>
<script>
import {Swiper, SwiperItem} from "@/components/common/swiper/index"
export default {
name: "HomeSwiper",
components:{
Swiper,
SwiperItem
},
props:{
banners:{
type:Array,
default(){
return[]
}
}
},
data(){
return {
isLoad:false
}
},
methods:{
imageLoad(){
if(!this.isLoad) {
this.$emit('swiperImageLoad')
this.isLoad=true
}
}
}
}
</script>
<style scoped>
</style>

@ -0,0 +1,20 @@
<template>
<div class="feature">
<a href="https://act.mogujie.com/zzlx67">
<img src="@/assets/img/home/recommend_bg.jpg" alt="">
</a>
</div>
</template>
<script>
export default {
name: "HomefeatureView"
}
</script>
<style scoped>
.feature img{
width: 100%;
}
</style>

@ -0,0 +1,15 @@
<template>
<div>
<h2>我的</h2>
</div>
</template>
<script>
export default {
name: "Profile"
}
</script>
<style scoped>
</style>

@ -0,0 +1,13 @@
module.exports={
configureWebpack:{
resolve:{
alias:{
'assets':'@/assets',
'common':'@/common',
'components':'@/components',
'network':'@/network',
'views':'@/views',
}
}
}
}
Loading…
Cancel
Save