Skip to content

V
vue2-elm

m0_60613409 / vue2-elm
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
V
vue2-elm

体验新版 GitCode，发现更多精彩内容 >>

提交 cfd23a2c 编写于 作者: M maguohua
浏览文件
操作

修改msite页面

上级 356a3bce
展开全部 显示空白变更内容
内联 并排
Showing with 705 addition and 215 deletion
src/App.vue
浏览文件 @ cfd23a2c
<template>
<div id="app">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
<defs>
<symbol viewBox="0 0 60 60" id="eleme">
<path fill="#3CABFF" fill-rule="evenodd" d="M0 9.375A9.374 9.374 0 0 1 9.375 0h41.25A9.374 9.374 0 0 1 60 9.375v41.25A9.374 9.374 0 0 1 50.625 60H9.375A9.374 9.374 0 0 1 0 50.625V9.375zm35.94 30.204c-5.601 3.147-12.645 1.256-15.834-4.217-3.206-5.501-1.303-12.537 4.25-15.713 4.7-2.689 10.51-1.749 14.127 1.941L27.526 27.89a2.81 2.81 0 0 0-1.037 3.854 2.862 2.862 0 0 0 3.887 1.035l15.988-9.166a17.238 17.238 0 0 0-1.222-2.571c-4.777-8.198-15.358-11.007-23.632-6.275-8.275 4.734-11.11 15.217-6.332 23.415 4.77 8.184 15.322 10.997 23.59 6.297.877-.5 1.654-1.037 2.376-1.623l-1.31-2.248a2.868 2.868 0 0 0-3.893-1.028zm10.824-7.39l-1.418-2.425-4.911 2.798 2.835 4.846 2.454-1.399h.002a2.779 2.779 0 0 0 1.038-3.82z">
</path>
</symbol>
<symbol viewBox="0 0 28 33" id="user">
<path fill-rule="evenodd" d="M20.798 19.289c2.636-2.002 4.215-5.091 4.215-8.437 0-5.886-4.845-10.647-10.808-10.647S3.397 4.966 3.397 10.852c0 3.345 1.578 6.433 4.212 8.435l.264-2.678C4.358 18.32 1.591 21.403.168 25.187l1.478.556v-1.579c-1.485.73-1.485.73-1.501 1.079-.054.188-.054.188-.069.278a2.58 2.58 0 0 0-.026.229 9.112 9.112 0 0 0-.019.4c-.008.265-.014.617-.018 1.039-.005.511-.006 1.037-.006 1.451v.027c-.004 1.732 1.41 3.129 3.154 3.129h22.082a3.18 3.18 0 0 0 3.172-3.153l.011-1.305.008-.897.003-.296.001-.083v-.022-.006-.001l.002-.278-.093-.262c-1.385-3.918-4.203-7.122-7.812-8.88l.263 2.678zm-1.911-2.516l-2.045 1.553 2.309 1.125c2.856 1.392 5.106 3.949 6.218 7.093l-.09-.54V26.033l-.001.083-.003.296-.008.897-.011 1.305c0 .01-.011.021-.013.021H3.161c-.007 0 .005.011.005.032v-.031c0-.404.001-.92.006-1.418.004-.4.01-.732.017-.969.004-.121.008-.212.012-.262l-.006.043c-.009.06-.009.06-.058.229-.01.336-.01.336-1.49 1.063H2.74l.385-1.024c1.141-3.035 3.35-5.495 6.131-6.849l2.309-1.124-2.045-1.554c-1.859-1.412-2.964-3.576-2.964-5.92 0-4.129 3.418-7.488 7.649-7.488s7.649 3.359 7.649 7.488c0 2.344-1.106 4.509-2.966 5.921z" class="path1">
</path>
</symbol>
<symbol viewBox="0 0 32 31" id="shop">
<g fill-rule="evenodd">
<path d="M28.232 1.822C27.905.728 26.97.152 25.759.152H5.588c-1.252 0-1.867.411-2.397 1.415l-.101.243-.443 1.434-.975 3.154-.002.007C.837 9.101.294 10.854.26 10.956l-.059.259c-.231 1.787.337 3.349 1.59 4.448 1.159 1.017 2.545 1.384 3.865 1.384.07 0 .07 0 .132-.002-.01.001-.01.001.061.002 1.32 0 2.706-.367 3.865-1.384a4.96 4.96 0 0 0 .413-.407l-1.043-.946-1.056.931c1.033 1.171 2.51 1.792 4.21 1.801.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384.148-.13.287-.267.418-.411l-1.044-.944-1.057.93c1.033 1.174 2.511 1.796 4.213 1.806.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384.15-.131.29-.27.422-.416l-1.046-.943-1.058.929c1.033 1.177 2.513 1.801 4.218 1.811.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384 1.206-1.058 1.858-2.812 1.676-4.426-.069-.61-.535-2.207-1.354-4.785l-.109-.342a327.554 327.554 0 0 0-1.295-3.966l-.122-.366.014.043h.004zm-2.684.85l.12.361.318.962c.329.999.658 2.011.965 2.973l.108.338c.719 2.262 1.203 3.92 1.24 4.249.08.711-.233 1.553-.735 1.993-.553.485-1.308.685-2.008.685l-.098-.002c-.987-.007-1.695-.306-2.177-.854l-1.044-1.189-1.06 1.175a2.192 2.192 0 0 1-.188.185c-.553.485-1.308.685-2.008.685l-.098-.002c-.985-.007-1.693-.305-2.174-.852l-1.043-1.185-1.059 1.171c-.058.064-.12.125-.186.183-.553.485-1.308.685-2.008.685l-.098-.002c-.984-.007-1.692-.304-2.173-.85L9.101 12.2l-1.058 1.166a2.248 2.248 0 0 1-.184.181c-.553.485-1.307.685-2.008.685l-.061-.001-.131.001c-.701 0-1.455-.2-2.008-.685-.538-.472-.767-1.102-.654-1.971l-1.396-.18 1.338.44c.043-.13.552-1.775 1.425-4.599l.002-.007.975-3.155.443-1.434-1.345-.415 1.245.658c.054-.102.042-.085-.083-.001-.122.082-.143.086-.009.086H25.763c.053 0-.164-.133-.225-.339l.014.043-.004-.001zM5.528 19.48c.778 0 1.408.63 1.408 1.408v7.424a1.408 1.408 0 1 1-2.816 0v-7.424c0-.778.63-1.408 1.408-1.408z">
</path>
<path d="M.28 29.72c0-.707.58-1.28 1.277-1.28h28.155a1.28 1.28 0 0 1 .007 2.56H1.561A1.278 1.278 0 0 1 .28 29.72z">
</path>
<path d="M26.008 19.48c.778 0 1.408.63 1.408 1.408v7.424a1.408 1.408 0 1 1-2.816 0v-7.424c0-.778.63-1.408 1.408-1.408z">
</path>
</g>
</symbol>
<symbol viewBox="0 0 28 33" id="location">
<g fill-rule="evenodd">
<path d="M20.809 21.6L12.9 29.509h1.616l-7.992-7.992a13.003 13.003 0 0 1-.506-.478c-4.25-4.25-4.25-11.14 0-15.389s11.14-4.25 15.389 0c4.25 4.25 4.25 11.14 0 15.389a10.81 10.81 0 0 1-.543.508l-.056.052zm1.56 1.669c.225-.196.443-.401.656-.613 5.142-5.142 5.142-13.48 0-18.622s-13.48-5.142-18.622 0c-5.142 5.142-5.142 13.48 0 18.622.18.18.364.354.553.522l8.753 8.755 8.661-8.664z" class="path1">
</path>
<path d="M9.428 16.739a6.063 6.063 0 1 0 8.573-8.575 6.063 6.063 0 0 0-8.573 8.575zm1.616-1.616a3.776 3.776 0 1 1 5.34-5.341 3.776 3.776 0 0 1-5.34 5.341z" class="path2">
</path>
</g>
</symbol>
<symbol id="star" viewBox="0 0 32 32">
<path class="path1" d="M16 26.382l-8.16 4.992c-1.5 0.918-2.382 0.264-1.975-1.435l2.226-9.303-7.269-6.218c-1.337-1.143-0.987-2.184 0.755-2.322l9.536-0.758 3.667-8.835c0.674-1.624 1.772-1.613 2.442 0l3.667 8.835 9.536 0.758c1.753 0.139 2.082 1.187 0.755 2.322l-7.269 6.218 2.226 9.303c0.409 1.71-0.485 2.347-1.975 1.435l-8.16-4.992z">
</path>
</symbol>
</defs>
</svg>
<router-view></router-view>
</div>
</template>
......
src/components/common/shoplist.vue 0 → 100644
浏览文件 @ cfd23a2c
<template>
<ul>
<router-link :to="{path: 'food', query:{}}" v-for="item in shopListArr" tag='li' :key="item.id" class="shop_li">
<section>
<img :src="imgBaseUrl + subImgUrl(item.image_path)" class="shop_img">
</section>
<hgroup class="shop_right">
<header class="shop_detail_header">
<h4 :class="item.is_premium? 'premium': ''" class="" class="shop_title ellipsis">{{item.name}}</h4>
<ul class="shop_detail_ul">
<li v-for="item in item.supports" key="item.id" class="supports">{{item.icon_name}}</li>
</ul>
</header>
<h5></h5>
<h5></h5>
</hgroup>
</router-link>
</ul>
</template>
<script>
import {mapState} from 'vuex'
import {imgBaseUrl} from '../../config/env'
import {msiteShopList} from '../../service/getData'
export default {
data(){
return {
offset: 0, // 批次加载店铺列表，每次加载20个 limit = 20
shopListArr:[], // 店铺列表数据
imgBaseUrl,
}
},
async mounted(){
this.shopListArr = await msiteShopList(this.latitude, this.longitude, this.offset);
},
props: [],
components: {
},
computed: {
...mapState([
'latitude','longitude'
])
},
methods: {
subImgUrl(path){
let suffix;
if (path.indexOf('jpeg') !== -1) {
suffix = '.jpeg'
}else{
suffix = '.png'
}
let url = '/' + path.substr(0,1) + '/' + path.substr(1,2) + '/' + path.substr(3) + suffix;
return url
}
},
watch: {
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.shop_li{
display: flex;
border-bottom: 0.025rem solid #f1f1f1;
padding: 0.8rem 0.4rem;
}
.shop_img{
@include wh(2.7rem, 2.7rem);
display: block;
margin-right: 0.3rem;
}
.shop_right{
flex: auto;
.shop_detail_header{
@include fj;
align-items: center;
.shop_title{
@include sc(0.7rem, #333);
font-weight: 700;
width: 8.5rem;
}
.premium{
}
.shop_detail_ul{
display: flex;
.supports{
@include sc(0.5rem, #999);
border: 0.025rem solid #f1f1f1;
padding: 0.04rem;
border-radius: 0.08rem;
margin-left: 0.1rem;
}
}
}
}
</style>
\ No newline at end of file
src/components/header/head.vue
浏览文件 @ cfd23a2c
<template>
<header id='head_top'>
<slot name='logo'></slot>
<div class="head_goback" v-if="goBack" @click="$router.go(-1)"></div>
<slot name='search'></slot>
<section class="head_goback" v-if="goBack" @click="$router.go(-1)">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2">
</svg>
</section>
<router-link to='/login' v-if='signinUp' class="head_login">登陆|注册</router-link>
<div class="title_head" v-if="headTitle">{{headTitle}}</div>
<section class="title_head ellipsis" v-if="headTitle">
<span class="title_text">{{headTitle}}</span>
</section>
<slot name="msite-title"></slot>
<slot name="changecity"></slot>
</header>
</template>
......@@ -40,23 +48,29 @@
#head_top{
background-color: $blue;
position: fixed;
z-index: 999999999999;
left: 0;
top: 0;
@include wh(100%, 1.95rem);
}
.head_goback{
left: 0.4rem;
@include wh(0.375rem, 0.7rem);
@include center-top;
@include backimg('../../images/icon_back.png');
@include wh(0.6rem, 0.8rem);
@include ct;
}
.head_login{
right: 0.55rem;
@include sizecolor(0.6rem, #fff);
@include center-top;
@include sc(0.65rem, #fff);
@include ct;
}
.title_head{
@include sizecolor(0.7rem, #fff);
@include center;
width: 50%;
color: #fff;
text-align: center;
.title_text{
@include sc(0.8rem, #fff);
text-align: center;
}
}
</style>
src/config/ajax.js 已删除 100644 → 0
浏览文件 @ 356a3bce
import {baseUrl} from './env'
export default (type = 'GET', url = '', data = {}, async = true) => {
return new Promise((resolve, reject) => { //定义一个promise
type = type.toUpperCase();
url = baseUrl + url;
let requestObj;
if (window.XMLHttpRequest) {
requestObj = new XMLHttpRequest();
} else {
requestObj = new ActiveXObject;
}
if (type == 'GET') {
let dataStr = ''; //数据拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&';
})
if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
requestObj.open(type, url, async);
requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
requestObj.send();
}else if (type == 'POST') {
requestObj.open(type, url, async);
requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
requestObj.send(JSON.stringify(data));
}else {
reject('error type');
}
requestObj.onreadystatechange = () => {
if (requestObj.readyState == 4) {
if (requestObj.status == 200) {
let obj = requestObj.response
if (typeof obj !== 'object') {
obj = JSON.parse(obj);
}
resolve(obj);
}else {
reject(requestObj);
}
}
}
})
}
\ No newline at end of file
src/config/env.js
浏览文件 @ cfd23a2c
/**
* 配置编译环境和线上环境之间的切换
*
* baseUrl : 路由地址域名
* baseUrl: 域名地址
* routerMode: 路由模式
* imgBaseUrl: 图片所在域名地址
*
*/
let baseUrl;
let routerMode;
const imgBaseUrl = 'https://fuss10.elemecdn.com';
if (process.env.NODE_ENV == 'development') {
baseUrl = '';
routerMode = 'history'
routerMode = 'hash'
}else{
baseUrl = 'https://mainsite-restapi.ele.me';
routerMode = 'hash'
}
export {baseUrl, routerMode}
\ No newline at end of file
export {baseUrl, routerMode, imgBaseUrl}
\ No newline at end of file
src/config/fetch.js
浏览文件 @ cfd23a2c
import {baseUrl} from './env'
export default (type = 'GET', url = '', data = {}) => {
return new Promise((resolve, reject) => { //返回一个promise
export default async (type = 'GET', url = '', data = {}) => {
type = type.toUpperCase();
url = baseUrl + url
let requestObj = {
credentials: 'include',
method: type,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
mode: "no-cors",
}
url = baseUrl + url;
if (type == 'GET') {
let dataStr = ''; //数据拼接字符串
......@@ -24,24 +14,63 @@ export default (type = 'GET', url = '', data = {}) => {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
}else if (type == 'POST') {
Object.defineProperty(requestObj, 'body', {
}
if (window.fetch) {
let requestConfig = {
credentials: 'include',
method: type,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
mode: "cors",
cache: "only-if-cached"
}
if (type == 'POST') {
Object.defineProperty(requestConfig, 'body', {
value: JSON.stringify(data)
})
}else {
reject('error type')
}
fetch(url, requestObj).then(res => {
if (res.status == 200) {
return res.json()
try {
var response = await fetch(url, requestConfig);
var responseJson = await response.json();
}catch (error){
throw new Error(error)
}
return responseJson
}else{
let requestObj;
if (window.XMLHttpRequest) {
requestObj = new XMLHttpRequest();
} else {
return reject(res)
requestObj = new ActiveXObject;
}
let sendData = '';
if (type == 'POST') {
sendData = JSON.stringify(data);
}
requestObj.open(type, url, true);
requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
requestObj.send(sendData);
requestObj.onreadystatechange = () => {
if (requestObj.readyState == 4) {
if (requestObj.status == 200) {
let obj = requestObj.response
if (typeof obj !== 'object') {
obj = JSON.parse(obj);
}
return obj
}else {
throw new Error(requestObj)
}
}
}
}
}).then(data => {
resolve(data);
}).catch(err => {
reject(err);
});
})
}
\ No newline at end of file
src/images/icon.svg 0 → 100644
浏览文件 @ cfd23a2c
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden"><defs><symbol viewBox="0 0 60 60" id="eleme"><path fill="#3CABFF" fill-rule="evenodd" d="M0 9.375A9.374 9.374 0 0 1 9.375 0h41.25A9.374 9.374 0 0 1 60 9.375v41.25A9.374 9.374 0 0 1 50.625 60H9.375A9.374 9.374 0 0 1 0 50.625V9.375zm35.94 30.204c-5.601 3.147-12.645 1.256-15.834-4.217-3.206-5.501-1.303-12.537 4.25-15.713 4.7-2.689 10.51-1.749 14.127 1.941L27.526 27.89a2.81 2.81 0 0 0-1.037 3.854 2.862 2.862 0 0 0 3.887 1.035l15.988-9.166a17.238 17.238 0 0 0-1.222-2.571c-4.777-8.198-15.358-11.007-23.632-6.275-8.275 4.734-11.11 15.217-6.332 23.415 4.77 8.184 15.322 10.997 23.59 6.297.877-.5 1.654-1.037 2.376-1.623l-1.31-2.248a2.868 2.868 0 0 0-3.893-1.028zm10.824-7.39l-1.418-2.425-4.911 2.798 2.835 4.846 2.454-1.399h.002a2.779 2.779 0 0 0 1.038-3.82z"></path></symbol><symbol viewBox="0 0 28 33" id="user"><path fill-rule="evenodd" d="M20.798 19.289c2.636-2.002 4.215-5.091 4.215-8.437 0-5.886-4.845-10.647-10.808-10.647S3.397 4.966 3.397 10.852c0 3.345 1.578 6.433 4.212 8.435l.264-2.678C4.358 18.32 1.591 21.403.168 25.187l1.478.556v-1.579c-1.485.73-1.485.73-1.501 1.079-.054.188-.054.188-.069.278a2.58 2.58 0 0 0-.026.229 9.112 9.112 0 0 0-.019.4c-.008.265-.014.617-.018 1.039-.005.511-.006 1.037-.006 1.451v.027c-.004 1.732 1.41 3.129 3.154 3.129h22.082a3.18 3.18 0 0 0 3.172-3.153l.011-1.305.008-.897.003-.296.001-.083v-.022-.006-.001l.002-.278-.093-.262c-1.385-3.918-4.203-7.122-7.812-8.88l.263 2.678zm-1.911-2.516l-2.045 1.553 2.309 1.125c2.856 1.392 5.106 3.949 6.218 7.093l-.09-.54V26.033l-.001.083-.003.296-.008.897-.011 1.305c0 .01-.011.021-.013.021H3.161c-.007 0 .005.011.005.032v-.031c0-.404.001-.92.006-1.418.004-.4.01-.732.017-.969.004-.121.008-.212.012-.262l-.006.043c-.009.06-.009.06-.058.229-.01.336-.01.336-1.49 1.063H2.74l.385-1.024c1.141-3.035 3.35-5.495 6.131-6.849l2.309-1.124-2.045-1.554c-1.859-1.412-2.964-3.576-2.964-5.92 0-4.129 3.418-7.488 7.649-7.488s7.649 3.359 7.649 7.488c0 2.344-1.106 4.509-2.966 5.921z" class="path1"></path></symbol><symbol viewBox="0 0 32 31" id="shop"><g fill-rule="evenodd"><path d="M28.232 1.822C27.905.728 26.97.152 25.759.152H5.588c-1.252 0-1.867.411-2.397 1.415l-.101.243-.443 1.434-.975 3.154-.002.007C.837 9.101.294 10.854.26 10.956l-.059.259c-.231 1.787.337 3.349 1.59 4.448 1.159 1.017 2.545 1.384 3.865 1.384.07 0 .07 0 .132-.002-.01.001-.01.001.061.002 1.32 0 2.706-.367 3.865-1.384a4.96 4.96 0 0 0 .413-.407l-1.043-.946-1.056.931c1.033 1.171 2.51 1.792 4.21 1.801.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384.148-.13.287-.267.418-.411l-1.044-.944-1.057.93c1.033 1.174 2.511 1.796 4.213 1.806.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384.15-.131.29-.27.422-.416l-1.046-.943-1.058.929c1.033 1.177 2.513 1.801 4.218 1.811.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384 1.206-1.058 1.858-2.812 1.676-4.426-.069-.61-.535-2.207-1.354-4.785l-.109-.342a327.554 327.554 0 0 0-1.295-3.966l-.122-.366.014.043h.004zm-2.684.85l.12.361.318.962c.329.999.658 2.011.965 2.973l.108.338c.719 2.262 1.203 3.92 1.24 4.249.08.711-.233 1.553-.735 1.993-.553.485-1.308.685-2.008.685l-.098-.002c-.987-.007-1.695-.306-2.177-.854l-1.044-1.189-1.06 1.175a2.192 2.192 0 0 1-.188.185c-.553.485-1.308.685-2.008.685l-.098-.002c-.985-.007-1.693-.305-2.174-.852l-1.043-1.185-1.059 1.171c-.058.064-.12.125-.186.183-.553.485-1.308.685-2.008.685l-.098-.002c-.984-.007-1.692-.304-2.173-.85L9.101 12.2l-1.058 1.166a2.248 2.248 0 0 1-.184.181c-.553.485-1.307.685-2.008.685l-.061-.001-.131.001c-.701 0-1.455-.2-2.008-.685-.538-.472-.767-1.102-.654-1.971l-1.396-.18 1.338.44c.043-.13.552-1.775 1.425-4.599l.002-.007.975-3.155.443-1.434-1.345-.415 1.245.658c.054-.102.042-.085-.083-.001-.122.082-.143.086-.009.086H25.763c.053 0-.164-.133-.225-.339l.014.043-.004-.001zM5.528 19.48c.778 0 1.408.63 1.408 1.408v7.424a1.408 1.408 0 1 1-2.816 0v-7.424c0-.778.63-1.408 1.408-1.408z"></path><path d="M.28 29.72c0-.707.58-1.28 1.277-1.28h28.155a1.28 1.28 0 0 1 .007 2.56H1.561A1.278 1.278 0 0 1 .28 29.72z"></path><path d="M26.008 19.48c.778 0 1.408.63 1.408 1.408v7.424a1.408 1.408 0 1 1-2.816 0v-7.424c0-.778.63-1.408 1.408-1.408z"></path></g></symbol><symbol viewBox="0 0 28 33" id="arrow-left"><path fill-rule="evenodd" d="M17.655 1.853L15.961.159.033 16.072 15.961 32l1.694-1.694L3.429 16.08 17.655 1.854z" class="path1"></path></symbol><symbol viewBox="0 0 28 33" id="location"><g fill-rule="evenodd"><path d="M20.809 21.6L12.9 29.509h1.616l-7.992-7.992a13.003 13.003 0 0 1-.506-.478c-4.25-4.25-4.25-11.14 0-15.389s11.14-4.25 15.389 0c4.25 4.25 4.25 11.14 0 15.389a10.81 10.81 0 0 1-.543.508l-.056.052zm1.56 1.669c.225-.196.443-.401.656-.613 5.142-5.142 5.142-13.48 0-18.622s-13.48-5.142-18.622 0c-5.142 5.142-5.142 13.48 0 18.622.18.18.364.354.553.522l8.753 8.755 8.661-8.664z" class="path1"></path><path d="M9.428 16.739a6.063 6.063 0 1 0 8.573-8.575 6.063 6.063 0 0 0-8.573 8.575zm1.616-1.616a3.776 3.776 0 1 1 5.34-5.341 3.776 3.776 0 0 1-5.34 5.341z" class="path2"></path></g></symbol><symbol viewBox="0 0 908 1013" id="search"><g fill-rule="evenodd"><path d="M427.496 872.502c236.136 0 427.229-195.436 427.229-436.118S663.632.266 427.496.266.267 195.702.267 436.384 191.36 872.502 427.496 872.502zm0-72.235c-195.874 0-354.994-162.736-354.994-363.882 0-201.146 159.12-363.882 354.994-363.882 195.874 0 354.994 162.736 354.994 363.882 0 201.146-159.12 363.882-354.994 363.882zM714.583 834.684l135.487 177.464 57.415-43.834L771.998 790.85l-57.415 43.834z"></path></g></symbol></defs></svg>
\ No newline at end of file
src/page/city/city.vue
浏览文件 @ cfd23a2c
......@@ -11,9 +11,7 @@
<input type="submit" name="submit" class="city_submit input_style" @click='postpois'>
</div>
</form>
<div>
<header v-if="historytitle" class="pois_search_history">搜索历史</header>
</div>
<ul class="getpois_ul">
<li v-for="(item, index) in placelist" @click='nextpage(index, item.geohash)' :key="index">
<h4 class="pois_name ellipsis">{{item.name}}</h4>
......@@ -32,22 +30,23 @@
export default {
data(){
return{
inputVaule:'',
cityid:'',
cityname:'',
placelist:[],
placeHistory:[],
historytitle: true,
placeNone: false,
inputVaule:'', // 搜索地址
cityid:'', // 当前城市id
cityname:'', // 当前城市名字
placelist:[], // 搜索城市列表
placeHistory:[], // 历史搜索记录
historytitle: true, // 默认显示搜索历史头部，点击搜索后隐藏
placeNone: false, // 搜索无结果，显示提示信息
}
},
created(){
mounted(){
this.cityid = this.$route.params.cityid;
//获取当前城市名字
currentcity(this.cityid).then(res => {
this.cityname = res.name;
})
//获取搜索历史记录
if (Tool.getStore('placeHistory')) {
this.placelist = JSON.parse(Tool.getStore('placeHistory'));
}
......@@ -62,7 +61,9 @@
},
methods:{
//发送搜索信息inputVaule
postpois(){
//输入值不为空时才发送信息
if (this.inputVaule) {
searchplace(this.cityid, this.inputVaule).then(res => {
this.historytitle = false;
......@@ -71,6 +72,10 @@
})
}
},
/**
* 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
* 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
*/
nextpage(index, geohash){
let history = Tool.getStore('placeHistory');
let choosePlace = this.placelist[index];
......@@ -103,13 +108,13 @@
}
.change_city{
right: 0.4rem;
@include sizecolor(0.6rem, #fff);
@include center-top;
@include sc(0.6rem, #fff);
@include ct;
}
.city_form{
background-color: #fff;
border-top: 1px solid $bordercolor;
border-bottom: 1px solid $bordercolor;
border-top: 1px solid $bc;
border-bottom: 1px solid $bc;
padding-top: 0.4rem;
div{
width: 90%;
......@@ -121,38 +126,38 @@
@include wh(100%, 1.4rem);
}
.city_input{
border: 1px solid $bordercolor;
border: 1px solid $bc;
padding: 0 0.3rem;
@include sizecolor(0.65rem, #333);
@include sc(0.65rem, #333);
}
.city_submit{
background-color: $blue;
@include sizecolor(0.65rem, #fff);
@include sc(0.65rem, #fff);
}
}
}
.pois_search_history{
border-top: 1px solid $bordercolor;
border-bottom: 1px solid $bordercolor;
border-top: 1px solid $bc;
border-bottom: 1px solid $bc;
padding-left: 0.5rem;
@include font(0.475rem, 0.8rem);
}
.getpois_ul{
background-color: #fff;
border-top: 1px solid $bordercolor;
border-top: 1px solid $bc;
li{
margin: 0 auto;
padding-top: 0.65rem;
border-bottom: 1px solid $bordercolor;
border-bottom: 1px solid $bc;
.pois_name{
margin: 0 auto 0.35rem;
width: 90%;
@include sizecolor(0.65rem, #333);
@include sc(0.65rem, #333);
}
.pois_address{
width: 90%;
margin: 0 auto 0.55rem;
@include sizecolor(0.45rem, #999);
@include sc(0.45rem, #999);
}
}
}
......
src/page/home/home.vue
浏览文件 @ cfd23a2c
......@@ -13,15 +13,15 @@
<span>></span>
</router-link>
</nav>
<div id="hot_city_container">
<section id="hot_city_container">
<h4 class="city_title">热门城市</h4>
<ul class="citylistul clear">
<router-link tag="li" v-for="item in hotcity" :to="'/city/' + item.id" :key="item.id">
{{item.name}}
</router-link>
</ul>
</div>
<div class="group_city_container">
</section>
<section class="group_city_container">
<ul class="letter_classify">
<li v-for="(value, key, index) in sortgroupcity" :key="key" class="letter_classify_li">
<h4 class="city_title">{{key}}
......@@ -35,7 +35,7 @@
</ul>
</li>
</ul>
</div>
</section>
</div>
</template>
......@@ -46,23 +46,26 @@ import {cityGuess, hotcity, groupcity} from '../../service/getData'
export default {
data(){
return{
guessCity: '',
guessCityid: '',
hotcity: [],
groupcity: {},
guessCity: '', //当前城市
guessCityid: '', //当前城市id
hotcity: [], //热门城市列表
groupcity: {}, //所有城市列表
}
},
created(){
mounted(){
// 获取当前城市
cityGuess().then(res => {
this.guessCity = res.name;
this.guessCityid = res.id;
})
//获取热门城市
hotcity().then(res => {
this.hotcity = res;
})
//获取所有城市
groupcity().then(res => {
this.groupcity = res;
})
......@@ -73,6 +76,7 @@ export default {
},
computed:{
//将获取的数据按照A-Z字母开头排序
sortgroupcity(){
let sortobj = {};
for (let i = 65; i <= 90; i++) {
......@@ -85,13 +89,11 @@ export default {
},
methods:{
//点击图标刷新页面
reload(){
this.$router.push('/')
window.location.reload();
}
},
// beforeRouteLeave(to, from, next){
// console.log(111)
// }
}
</script>
......@@ -101,13 +103,13 @@ export default {
.head_logo{
left: 0.4rem;
font-weight: 400;
@include sizecolor(0.7rem, #fff);
@include sc(0.7rem, #fff);
@include wh(2.3rem, 0.7rem);
@include center-top;
@include ct;
}
.city_nav{
margin-top: 2.35rem;
border-top: 1px solid $bordercolor;
border-top: 1px solid $bc;
background-color: #fff;
margin-bottom: 0.4rem;
.city_tip{
......@@ -116,11 +118,11 @@ export default {
line-height: 1.45rem;
padding: 0 0.45rem;
span:nth-of-type(1){
@include sizecolor(0.55rem, #666);
@include sc(0.55rem, #666);
}
span:nth-of-type(2){
font-weight: 900;
@include sizecolor(0.475rem, #9f9f9f);
@include sc(0.475rem, #9f9f9f);
}
}
.guess_city{
......@@ -128,8 +130,8 @@ export default {
height: 1.8rem;
justify-content: space-between;
padding: 0 0.45rem;
border-top: 1px solid $bordercolor;
border-bottom: 2px solid $bordercolor;
border-top: 1px solid $bc;
border-bottom: 2px solid $bc;
@include font(0.75rem, 1.8rem);
span:nth-of-type(1){
color: $blue;
......@@ -148,8 +150,8 @@ export default {
float: left;
text-align: center;
color: $blue;
border-bottom: 0.025rem solid $bordercolor;
border-right: 0.025rem solid $bordercolor;
border-bottom: 0.025rem solid $bc;
border-right: 0.025rem solid $bc;
@include wh(25%, 1.75rem);
@include font(0.6rem, 1.75rem);
}
......@@ -161,18 +163,18 @@ export default {
color: #666;
font-weight: 400;
text-indent: 0.45rem;
border-top: 2px solid $bordercolor;
border-bottom: 1px solid $bordercolor;
border-top: 2px solid $bc;
border-bottom: 1px solid $bc;
@include font(0.55rem, 1.45rem, "Helvetica Neue");
span{
@include sizecolor(0.475rem, #999);
@include sc(0.475rem, #999);
}
}
.letter_classify_li{
margin-bottom: 0.4rem;
background-color: #fff;
border-bottom: 1px solid $bordercolor;
border-bottom: 1px solid $bc;
.groupcity_name_container{
li{
color: #666;
......
src/page/msite/msite.vue
浏览文件 @ cfd23a2c
<template>
<div>{{abc}}</div>
<div>
<head-top signin-up='msite'>
<router-link to="/search" class="link_search" slot="search">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="9" cy="9" r="8" stroke="rgb(255,255,255)" stroke-width="2" fill="none"/>
<line x1="15" y1="15" x2="20" y2="20" style="stroke:rgb(255,255,255);stroke-width:2"/>
</svg>
</router-link>
<router-link to="/home" slot="msite-title" class="msite_title">
<span class="title_text">{{msietTitle}}</span>
</router-link>
</head-top>
<nav class="msite_nav">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide food_types_container" v-for="(item, index) in foodTypes" :key="index">
<router-link :to="{path: '/food', query: {geohash}}" v-for="foodItem in item" :key="foodItem.id" class="link_to_food">
<figure>
<img :src="imgBaseUrl + foodItem.image_url">
<figcaption>{{foodItem.title}}</figcaption>
</figure>
</router-link>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</nav>
<div class="shop_list_container">
<header class="shop_header">
<svg class="shop_icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shop"></use>
</svg>
<span class="shop_header_title">附近商家</span>
</header>
<shop-list v-if="hasGetData"></shop-list>
</div>
</div>
</template>
<script>
import {mapMutations} from 'vuex'
import {imgBaseUrl} from '../../config/env'
import headTop from '../../components/header/head'
import shopList from '../../components/common/shoplist'
import {msiteAdress, msiteFoodTypes, msiteShopList} from '../../service/getData'
import '../../plugins/swiper.min.js'
import '../../style/swiper.min.css'
export default {
data(){
return {
abc:2
geohash: '', // city页面传递过来的地址geohash
msietTitle: '获取地址中...', // msiet页面头部标题
foodTypes: [], // 食品分类列表
hasGetData: false, //是否已经获取数据
imgBaseUrl, //图片域名地址
}
},
created(){
async beforeMount(){
this.geohash = this.$route.query.geohash;
//获取位置信息
let res = await msiteAdress(this.geohash);
this.msietTitle = res.name;
// 记录当前经度纬度
this.RECORD_ADDRESS(res)
this.hasGetData = true;
},
mounted(){
//获取导航食品类型列表
msiteFoodTypes(this.geohash).then(res => {
let resLength = res.length;
let resArr = res.concat([]); // 返回一个新的数组
let foodArr = [];
for (let i = 0, j = 0; i < resLength; i += 8, j++) {
foodArr[j] = resArr.splice(0, 8);
}
this.foodTypes = foodArr;
}).then(() => {
new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
loop: true
});
})
},
components: {
headTop,
shopList
},
computed: {
},
methods: {
...mapMutations([
'RECORD_ADDRESS'
])
},
watch: {
}
}
......@@ -18,5 +105,71 @@ export default {
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.link_search{
left: .8rem;
@include wh(.8rem, .9rem);
@include ct;
}
.msite_title{
@include center;
width: 50%;
color: #fff;
text-align: center;
margin-left: -0.5rem;
.title_text{
@include sc(0.8rem, #fff);
text-align: center;
display: block;
}
}
.msite_nav{
padding-top: 2.1rem;
background-color: #fff;
border-bottom: 0.025rem solid $bc;
.swiper-container{
@include wh(100%, auto);
padding-bottom: 0.6rem;
.swiper-pagination{
bottom: 0.2rem;
}
}
}
.food_types_container{
display:flex;
flex-wrap: wrap;
.link_to_food{
width: 25%;
padding: 0.3rem 0rem;
@include fj(center);
figure{
img{
margin-bottom: 0.3rem;
@include wh(1.8rem, 1.8rem);
}
figcaption{
text-align: center;
@include sc(0.55rem, #666);
}
}
}
}
.shop_list_container{
margin-top: .4rem;
border-top: 0.025rem solid $bc;
background-color: #fff;
.shop_header{
.shop_icon{
fill: #999;
margin-left: 0.6rem;
vertical-align: middle;
@include wh(0.6rem, 0.6rem);
}
.shop_header_title{
color: #999;
@include font(0.55rem, 1.6rem);
}
}
}
</style>
src/plugins/swiper.min.js 0 → 100755
浏览文件 @ cfd23a2c
此差异已折叠。
src/router/router.js
浏览文件 @ cfd23a2c
......@@ -11,7 +11,7 @@ const forget = r => require.ensure([], () => r(require('../page/forget/forget'))
const checkout = r => require.ensure([], () => r(require('../page/checkout/checkout')), 'checkout')
const order = r => require.ensure([], () => r(require('../page/order/order')), 'order')
const vipcard = r => require.ensure([], () => r(require('../page/vipcard/vipcard')), 'vipcard')
const food = r => require.ensure([], () => r(require('../page/msite/food/food')), 'food')
const food = r => require.ensure([], () => r(require('../page/food/food')), 'food')
export default [{
......@@ -21,12 +21,8 @@ export default [{
{ path: '', redirect: '/home' }, //地址为空时跳转home页面
{ path: '/home', component: home }, //首页城市列表页
{ path: '/city/:cityid', component: city }, //当前选择城市页
{ path: '/msite', component: msite, //所有商铺列表页
children:[
{ path: 'food', component: food }, //特色商铺列表页
{ path: '*', component: food } //特色商铺列表页
]
},
{ path: '/msite', component: msite, }, //所有商铺列表页
{ path: '/food', component: food }, //特色商铺列表页
{ path: '/search', component: search }, //搜索页
{ path: '/shop', component: shop }, //商铺详情页
{ path: '/login', component: login }, //登陆注册页
......@@ -34,6 +30,6 @@ export default [{
{ path: '/forget', component: forget }, //修改密码页
{ path: '/checkout', component: checkout }, //确认订单页
{ path: '/order', component: order }, //订单列表页
{ path: '/vipcard', component: vipcard } //vip卡页
{ path: '/vipcard', component: vipcard }, //vip卡页
]
}]
\ No newline at end of file
src/service/getData.js
浏览文件 @ cfd23a2c
import fetch from '../config/fetch'
import * as home from './tempdata/home'
import * as city from './tempdata/city'
import * as msite from './tempdata/msite'
/**
* 获取首页默认地址
*/
......@@ -21,9 +23,18 @@ const currentcity = number => fetch('GET', '/v1/cities/' + number, {})
* 获取搜索地址
*/
const searchplace = (cityid, value) => fetch('GET', '/v1/pois', {type: 'search', city_id: cityid, keyword: value})
/**
* 获取msite页面地址信息
*/
//const msiteAdress = geohash => fetch('GET', '/v2/pois/' + geohash, {})
/**
* 获取msite页面食品分类列表
*/
//const msiteFoodTypes = geohash => fetch('GET', '/v2/index_entry', {geohash, group_type:'1', 'flags[]':'F'})
/**
* 获取msite商铺列表
*/
//const msiteShopList = (latitude, longitude, offset) => fetch('GET', '/shopping/restaurants', {latitude, longitude, offset, limit: '20', 'extras[]':'activities'})
......@@ -39,6 +50,9 @@ const setpromise = data => {
// const groupcity = () => setpromise(home.groupcity)
// const currentcity = number => setpromise(city.currentcity)
// const searchplace = (cityid, value) => setpromise(city.searchdata)
const msiteAdress = geohash => setpromise(msite.msiteAdress)
const msiteFoodTypes = geohash => setpromise(msite.foodTypes)
const msiteShopList = (latitude, longitude, offset) => setpromise(msite.shopList)
export {cityGuess, hotcity, groupcity, currentcity, searchplace}
\ No newline at end of file
export {cityGuess, hotcity, groupcity, currentcity, searchplace, msiteAdress, msiteFoodTypes, msiteShopList}
\ No newline at end of file
src/service/tempdata/msite.js 0 → 100644
浏览文件 @ cfd23a2c
此差异已折叠。
src/store/index.js
浏览文件 @ cfd23a2c
......@@ -3,20 +3,17 @@ import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'
import checkout from './modules/checkout/checkout'
Vue.use(Vuex)
const state = {
test1: null
latitude: '', // 当前位置纬度
longitude: '', // 当前位置经度
}
export default new Vuex.Store({
state,
getters,
actions,
mutations,
modules: {
checkout,
}
mutations
})
\ No newline at end of file
src/store/modules/checkout/checkout.js 已删除 100644 → 0
浏览文件 @ 356a3bce
import { GET_DATA2 } from '../../mutation-types'
import { cityGuess } from '../../../service/getData'
const state = {
test2: null
}
const getters = {
}
const mutations = {
[GET_DATA2] (state, { data }) {
console.log(data)
state.test2 = data
},
}
const actions = {
getData2({ commit, state }) {
cityGuess().then(res => {
commit(GET_DATA2, {data: res})
})
},
}
export default {
state,
getters,
mutations,
actions
}
\ No newline at end of file
src/store/mutation-types.js
浏览文件 @ cfd23a2c
export const GET_DATA = 'GET_DATA'
export const RECORD_ADDRESS = 'RECORD_ADDRESS'
export const GET_DATA2 = 'GET_DATA2'
\ No newline at end of file
src/store/mutations.js
浏览文件 @ cfd23a2c
import { GET_DATA } from './mutation-types.js'
import { RECORD_ADDRESS } from './mutation-types.js'
export default {
[GET_DATA] (state, { data }) {
console.log(data)
state.test1 = data
// 记录当前经度纬度
[RECORD_ADDRESS] (state, {latitude, longitude}) {
state.latitude = latitude;
state.longitude = longitude;
},
}
\ No newline at end of file
src/style/common.scss
浏览文件 @ cfd23a2c
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, i, b, textarea, button, input, select {
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption {
padding: 0;
margin: 0;
list-style: none;
......@@ -10,6 +10,7 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
font-weight: lighter;
font-family: "Microsoft Yahei",sans-serif;
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing: antialiased;
&:focus {
outline: none;
}
......
src/style/mixin.scss
浏览文件 @ cfd23a2c
$blue: #3190e8;
$bordercolor: #e4e4e4;
$bc: #e4e4e4;
// 背景图片设置
@mixin backimg($url) {
// 背景图片地址和大小
@mixin bis($url) {
background-image: url($url);
background-repeat: no-repeat;
background-size: 100% 100%;
......@@ -17,7 +17,7 @@ $bordercolor: #e4e4e4;
}
//定位上下居中
@mixin center-top {
@mixin ct {
position: absolute;
top: 50%;
transform: translateY(-50%);
......@@ -35,7 +35,14 @@ $bordercolor: #e4e4e4;
}
//字体大小，颜色
@mixin sizecolor($size, $color){
@mixin sc($size, $color){
font-size: $size;
color: $color;
}
//flex 布局和 子元素 对其方式
@mixin fj($type: space-between){
display: flex;
justify-content: $type;
}
\ No newline at end of file
src/style/swiper.min.css 0 → 100755
浏览文件 @ cfd23a2c
/**
* Swiper 3.4.1
* Most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2016, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* Released on: December 13, 2016
*/
.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;height:100%;position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}.swiper-pagination-progress{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar{-webkit-transform-origin:right top;-moz-transform-origin:right top;-ms-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progress{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progress{width:4px;height:100%;left:0;top:0}.swiper-pagination-progress.swiper-pagination-white{background:rgba(255,255,255,.5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff}.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background:#000}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.swiper-container-cube,.swiper-container-flip{overflow:visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-slide{visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-moz-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;-moz-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;-webkit-background-size:100%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或