This commit is contained in:
20932067@zju.edu.cn
parent
ffe8a93043
commit
06b40477df
|
|
@ -60,9 +60,9 @@ exports.cssLoaders = function (options) {
|
|||
css: generateLoaders(),
|
||||
postcss: generateLoaders(),
|
||||
less: generateLoaders('less'),
|
||||
sass: generateLoaders('sass',
|
||||
sass: generateLoaders('sass',
|
||||
{ indentedSyntax: true,
|
||||
includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')]
|
||||
includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')]
|
||||
}),
|
||||
scss: generateLoaders('sass',
|
||||
{ includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ module.exports = {
|
|||
|
||||
// Paths
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: './',
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -2,12 +2,11 @@
|
|||
<html id="html">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="Author" content="波哥无敌">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="keywords" content="快递 快递代拿 校园 帮拿快递 懒人校园" />
|
||||
<meta name="Description" content="校园小飞侠 快递代拿系统 在寝室坐着,网上轻松下单,快递到手,懒人首选."/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link rel="shortcut icon" href="./static/img/logo.ico"/>
|
||||
<link rel="shortcut icon" href="./src/assets/img/logo.ico"/>
|
||||
<title>校园小飞侠 -- 快递代拿系统</title>
|
||||
<style>
|
||||
#app-loading-first{
|
||||
|
|
@ -37,7 +36,7 @@
|
|||
<body>
|
||||
<div id="app-loading-first">
|
||||
<div class="loading-first-cont">
|
||||
<img class="loading-img" src="./static/img/loading.gif" alt="加载中...">
|
||||
<img class="loading-img" src="./src/assets/img/loading.gif" alt="加载中...">
|
||||
</div>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "express_delivery",
|
||||
"version": "1.0.0",
|
||||
"description": "express_delivery 校园闪电侠,快递代拿系统",
|
||||
"description": "express_delivery 校园小飞侠,快递代拿系统",
|
||||
"author": "bgwd666 <814233583@qq.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
|
|
@ -3,7 +3,7 @@
|
|||
<div class="logo ">
|
||||
<a href="javascript:void(0);">
|
||||
<img src="../assets/img/logo.png" alt="logo图标">
|
||||
<h1>校园闪电侠</h1>
|
||||
<h1>校园小飞侠</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
|
|
|
|||
|
|
@ -1,102 +0,0 @@
|
|||
<template>
|
||||
<div class="aboutUs">
|
||||
<div class="abt-header">
|
||||
<img src="../../../static/img/aboutUs-header-bg.jpg" alt="关于我们背景图片">
|
||||
</div>
|
||||
<topArticle :topArticle='topArticle'></topArticle>
|
||||
<myStory
|
||||
:myStoryBody='myStoryBody'>
|
||||
</myStory>
|
||||
<advantage
|
||||
:advantage='advantage'
|
||||
:achievementData='achievementData'></advantage>
|
||||
<appFooter></appFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topArticle from './topArticle'
|
||||
import myStory from './myStory'
|
||||
import advantage from './advantage'
|
||||
import appFooter from '../AppFooter'
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
topArticle:`
|
||||
我们为您提供专业设计解决方案通过研究商业模式来定义
|
||||
品牌模式提供优秀的品牌整合解决方案，令品牌长远发展，
|
||||
更具竞争力新成立企业，需要有好的标志，好的品牌形象
|
||||
有助于提升企业。需要有好的标志，好的品牌形象有助于
|
||||
提升企业整体竞争力。
|
||||
`,
|
||||
myStoryBody:[
|
||||
{
|
||||
id:1,contImg:'./static/img/aboutUs-article-pic01.jpg',
|
||||
bindClass:'Purpose',
|
||||
title:'我们的宗旨',
|
||||
article:`公司创意定位 为您提供了众多广告条件，
|
||||
助您快速找准方向运用各种渠道， 量身定制合理的方案.
|
||||
创造有影响力的网站形象与口碑，让我们的创意变得更
|
||||
具有商业价值，好看+好用+激发消费购买欲望`
|
||||
},
|
||||
{
|
||||
id:2,contImg:'./static/img/aboutUs-article-pic02.jpg',
|
||||
title:'我们的团队',
|
||||
bindClass:'ourTeam',
|
||||
article:`为客户提供优质的服务，及时快速跟进。
|
||||
好的品牌形象有助于提升企业好的品牌形象
|
||||
有助于提升企业整体竞争力。使企业形象和产品
|
||||
品牌在消费者脑海中形成一种个性化 的区隔，
|
||||
从而建立起客户的品牌声浪`
|
||||
}
|
||||
],
|
||||
advantage:{
|
||||
title:'平台优势',
|
||||
article:`我们为您提供专业设计解决方案通过研究
|
||||
商业模式来定义品牌模式提供优秀的品牌整合解决方案，
|
||||
令品牌长远发展，更具竞争力新成立企业，需要有好的
|
||||
标志，好的品牌形象有助于提升企业。`
|
||||
},
|
||||
achievementData:[
|
||||
{title:'成立时间',data:2016},
|
||||
{title:'全国站点',data:120},
|
||||
{title:'加盟人数',data:6854},
|
||||
{title:'成交订单',data:65324}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
components:{
|
||||
appFooter,
|
||||
topArticle,
|
||||
myStory,
|
||||
advantage
|
||||
},
|
||||
mounted() {
|
||||
this.$emit('scrollShowComponent',this.$children);
|
||||
},
|
||||
destroyed(){
|
||||
this.$emit('pageDestroyed');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.aboutUs{
|
||||
position: relative;
|
||||
P{
|
||||
text-indent: 2rem;
|
||||
}
|
||||
}
|
||||
.abt-header{
|
||||
position: relative;
|
||||
img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
<template>
|
||||
<div class="myStory">
|
||||
<!-- 宗旨 -->
|
||||
<!-- 我们的团队 -->
|
||||
<div class="storyItem"
|
||||
:class="[item.bindClass]"
|
||||
v-for='item in myStoryBody'
|
||||
:key='item.id'>
|
||||
<div class="imgCont">
|
||||
<img :src="item.contImg" alt="我们的故事">
|
||||
</div>
|
||||
<div class="articleCont">
|
||||
<h3>{{item.title}}</h3>
|
||||
<div class="article-body">
|
||||
<transition name="transX">
|
||||
<p v-if='isCmptShow'>{{item.article}}</p>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
myStoryBody:Array
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
isCmptShow:false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.myStory{
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.storyItem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
.Purpose{
|
||||
flex-direction: row;
|
||||
}
|
||||
.ourTeam{
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.imgCont{
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.articleCont{
|
||||
width: 50%;
|
||||
h3{
|
||||
margin:4rem 0 2rem;
|
||||
line-height: 2rem;
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
font-family: '微软雅黑';
|
||||
}
|
||||
}
|
||||
.article-body{
|
||||
width: 100%;
|
||||
p{
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
line-height: 1.3rem;
|
||||
letter-spacing: 0.1rem;
|
||||
text-align:justify;
|
||||
text-justify: inter-ideograph;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width:640px){
|
||||
.imgCont,
|
||||
.articleCont{
|
||||
width: 100%;
|
||||
}
|
||||
.articleCont{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.article-body p{
|
||||
width: 80%;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.Purpose,
|
||||
.ourTeam{
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<div class="aboutUs">
|
||||
<div class="abt-header">
|
||||
<img src="../../assets/img/aboutUs-header-bg.jpg" alt="关于我们背景图片">
|
||||
</div>
|
||||
<topArticle :topArticle='topArticle'></topArticle>
|
||||
<myStory>
|
||||
</myStory>
|
||||
<advantage
|
||||
:advantage='advantage'
|
||||
:achievementData='achievementData'></advantage>
|
||||
<appFooter></appFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topArticle from './topArticle'
|
||||
import myStory from './myStory'
|
||||
import advantage from './advantage'
|
||||
import appFooter from '../AppFooter'
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
topArticle:`
|
||||
我们致力于提供最优质、最贴心的的服务，服务于每一位校园学子，
|
||||
为他们提供方便快捷的快递服务。同时打造良好的校园口碑，
|
||||
令校园小飞侠有更长远的发展，
|
||||
让小飞侠在校园快递这个服务行业中有强有力的竞争力。
|
||||
`,
|
||||
advantage:{
|
||||
title:'平台优势',
|
||||
article:`对于校园代取快递，我们平台有最系统的规划及其管理，
|
||||
在服务客户的同时可以有效保障客户的快递安全问题，
|
||||
客户的问题也可以反馈给我们平台，我们可以及时高效的解决这些问题。`
|
||||
},
|
||||
achievementData:[
|
||||
{title:'成立时间',data:2020},
|
||||
{title:'全国站点',data:1},
|
||||
{title:'加盟人数',data:0},
|
||||
{title:'成交订单',data:20}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
components:{
|
||||
appFooter,
|
||||
topArticle,
|
||||
myStory,
|
||||
advantage
|
||||
},
|
||||
mounted() {
|
||||
this.$emit('scrollShowComponent',this.$children);
|
||||
},
|
||||
destroyed(){
|
||||
this.$emit('pageDestroyed');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.aboutUs{
|
||||
position: relative;
|
||||
P{
|
||||
text-indent: 2rem;
|
||||
}
|
||||
}
|
||||
.abt-header{
|
||||
position: relative;
|
||||
img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<div class="myStory">
|
||||
<!-- 宗旨 -->
|
||||
<!-- 我们的团队 -->
|
||||
<div class="storyItem"
|
||||
:class="[item.bindClass]"
|
||||
v-for='item in myStoryBody'
|
||||
:key='item.id'>
|
||||
<div class="imgCont">
|
||||
<img :src="item.contImg" alt="我们的故事">
|
||||
</div>
|
||||
<div class="articleCont">
|
||||
<h3>{{ item.title }}</h3>
|
||||
<div class="article-body">
|
||||
<transition name="transX">
|
||||
<p v-if='isCmptShow'>{{ item.article }}</p>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isCmptShow: false,
|
||||
myStoryBody: [
|
||||
{
|
||||
id: 1,
|
||||
contImg: require('../../assets/img/aboutus-article-pic01.jpg'),
|
||||
bindClass: 'Purpose',
|
||||
title: '我们的宗旨',
|
||||
article: `关于校园小飞侠的定位，是为每一位客户在现有的条件下，
|
||||
为客户提供最方便有效的快递服务,创造有影响力的校园形象
|
||||
与口碑，让我们的校园小飞侠变得更具商业价值，
|
||||
用方便+快捷+优质为客户提供最好的服务。`
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
contImg: require('../../assets/img/aboutus-article-pic02.jpg'),
|
||||
title: '我们的团队',
|
||||
bindClass: 'ourTeam',
|
||||
article: `对于校园小飞侠的运营，我们团队提供最高端有效的技术，以客户为中心，提供优质服务。`
|
||||
}
|
||||
],
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.myStory {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.storyItem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Purpose {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.ourTeam {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.imgCont {
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.articleCont {
|
||||
width: 50%;
|
||||
|
||||
h3 {
|
||||
margin: 4rem 0 2rem;
|
||||
line-height: 2rem;
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
font-family: '微软雅黑';
|
||||
}
|
||||
}
|
||||
|
||||
.article-body {
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
line-height: 1.3rem;
|
||||
letter-spacing: 0.1rem;
|
||||
text-align: justify;
|
||||
text-justify: inter-ideograph;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.imgCont,
|
||||
.articleCont {
|
||||
width: 100%;
|
||||
}
|
||||
.articleCont {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.article-body p {
|
||||
width: 80%;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.Purpose,
|
||||
.ourTeam {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
<template>
|
||||
<div class="admin-login-page">
|
||||
<div class="admin-login-cont">
|
||||
<div class="header-title">
|
||||
<h2 class="title">admin</h2>
|
||||
</div>
|
||||
<div class="form-cont">
|
||||
<el-form :model="adminForm" :rules="adminFormRules"
|
||||
ref="adminForm" label-width="3rem"
|
||||
@submit.native.prevent
|
||||
class="admin-Form">
|
||||
<el-form-item label="账号" prop="adminId">
|
||||
<el-input v-model="adminForm.adminId"
|
||||
placeholder="管理员账号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="adminPassWord">
|
||||
<el-input :type='inputType'
|
||||
v-model="adminForm.adminPassWord"
|
||||
placeholder="管理员密码"></el-input>
|
||||
<i class="toggle el-icon-view"
|
||||
:class="{'color':adminForm.adminPassWord==''}"
|
||||
@click="changeInputType"></i>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary"
|
||||
@click="submitForm('adminForm')">登录</el-button>
|
||||
<el-button @click="resetForm('adminForm')">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
inputType:'password',
|
||||
adminForm:{
|
||||
adminId:'',
|
||||
adminPassWord:''
|
||||
},
|
||||
adminFormRules:{
|
||||
adminId:[
|
||||
{ required: true, message: '请输入账号', trigger: 'blur' },
|
||||
{ pattern:/^1[3-8][0-9]{9}$/ , message:'手机号格式不正确', trigger: 'blur'}
|
||||
],
|
||||
adminPassWord:[
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
window.onkeydown = (e)=>{
|
||||
let key = window.event.keyCode;
|
||||
if(key==13){
|
||||
this.submitForm('adminForm');
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeInputType(){
|
||||
this.inputType=(this.inputType=='password')?'text':'password';
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let adminPost = {
|
||||
adminId:this.adminForm.adminId,
|
||||
adminPassWord:this.adminForm.adminPassWord
|
||||
};
|
||||
axios.post('/admin/login',adminPost).then(response=>{
|
||||
let res = response.data;
|
||||
if(res.status=='0'){
|
||||
this.$notify({
|
||||
title: '登录',
|
||||
message: `登录成功`,
|
||||
duration:2000,
|
||||
type: 'success'
|
||||
});
|
||||
this.$router.push({path:'/admin'});
|
||||
}else{
|
||||
this.$notify({
|
||||
title: '登录失败',
|
||||
message:res.msg,
|
||||
duration:2000,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
window.onkeydown = null
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.admin-login-page{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
|
||||
background-color: #cff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.admin-login-cont{
|
||||
position: relative;
|
||||
width: 25rem;
|
||||
height: 20rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 2rem 2rem 3rem #423f3f;
|
||||
.header-title{
|
||||
height: 4rem;
|
||||
.title{
|
||||
line-height: 4rem;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0.05rem;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
.form-cont{
|
||||
width: 70%;
|
||||
margin: 2rem auto;
|
||||
.admin-Form{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.toggle.el-icon-view{
|
||||
position: absolute;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
top: 50%;
|
||||
transform: translate(0,-50%);
|
||||
right: 0.2rem;
|
||||
}
|
||||
.toggle.color{
|
||||
color: #ccc;
|
||||
}
|
||||
// 登录按钮
|
||||
.el-button--primary{
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
<template>
|
||||
<div class="customer-service">
|
||||
<serverHeader :headerNote='headerNote'></serverHeader>
|
||||
<question
|
||||
:questionData='questionData'
|
||||
:show='show'></question>
|
||||
<serverCall
|
||||
:show='show'
|
||||
@openMsg='openMsg'></serverCall>
|
||||
<appFooter></appFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import serverHeader from './ServerHeader'
|
||||
import question from './Question'
|
||||
import serverCall from './ServerCall'
|
||||
import appFooter from '../AppFooter'
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
questionData:[
|
||||
{
|
||||
id:1,topImg:'./static/img/customer-service-question1.png',
|
||||
h5Title:'时间问题',
|
||||
list:[
|
||||
{
|
||||
quest:'快递长时间未送达?',
|
||||
result:`订单显示已接单, 但是快递长时间未送达 ,
|
||||
您可以查看订单详细信息, 尝试联系送单员 ,
|
||||
如果遇到无法解决的问题, 可以联系客服.`
|
||||
},
|
||||
{
|
||||
quest:'订单一直没有人接单?',
|
||||
result:`可能您的订单中显示您的快递太大 ,但是报酬
|
||||
较少 ,您可以尝试更改订单信息 ,或者重新发布.`
|
||||
},
|
||||
{
|
||||
quest:'超过两天未送达?',
|
||||
result:`如果已接单,但是超过两天未收到快递,
|
||||
但是订单显示已经签收,这时请联系客服处理.`
|
||||
},
|
||||
{
|
||||
quest:'订单异常？',
|
||||
result:'如果您对订单有任何疑问 ,您都可以联系客服处理.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id:2,topImg:'./static/img/customer-service-question2.png',
|
||||
h5Title:'快递问题',
|
||||
list:[
|
||||
{
|
||||
quest:'快递损坏或丢失?',
|
||||
result:'如果您快递送到手已经损坏 ,请联系客服协商处理'
|
||||
},
|
||||
{
|
||||
quest:'订单一直没有人接单?',
|
||||
result:`可能您的订单中显示您的快递太大 ,但是报酬
|
||||
较少 ,您可以尝试更改订单信息 ,或者重新发布.`
|
||||
},
|
||||
{
|
||||
quest:'订单已发布但信息错误?',
|
||||
result:`在没有接单的情况您可以自己选择取消订单 ,
|
||||
如果已经接单您可以联系送单员协助商量处理 ,
|
||||
或者联系客服.`
|
||||
},
|
||||
{
|
||||
quest:'订单异常？',
|
||||
result:'如果您对订单有任何疑问 ,您都可以联系客服处理.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id:3,topImg:'./static/img/customer-service-question3.png',
|
||||
h5Title:'其他问题',
|
||||
list:[
|
||||
{
|
||||
quest:'如何成为工作人员',
|
||||
result:'在个人中心>>加入我们 可以申请加入'
|
||||
},
|
||||
{
|
||||
quest:'订单异常？',
|
||||
result:'如果您对订单有任何疑问 ,您都可以联系客服处理.'
|
||||
},
|
||||
{
|
||||
quest:'订单时间异常？',
|
||||
result:'如果您对订单有任何疑问 ,您都可以联系客服处理.'
|
||||
},
|
||||
{
|
||||
quest:'订单信息异常？',
|
||||
result:'如果您对订单有任何疑问 ,您都可以联系客服处理.'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
headerNote:[
|
||||
'小手一抖 快递到手!',
|
||||
'我听过最动听的话是: 您的快递到了 !',
|
||||
'天冷了, 拿快递这种事就交给我们吧 !'
|
||||
],
|
||||
show:false
|
||||
}
|
||||
},
|
||||
components:{
|
||||
serverCall,
|
||||
question,
|
||||
serverHeader,
|
||||
appFooter
|
||||
},
|
||||
methods:{
|
||||
openMsg() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
duration:2000,
|
||||
message: '亲, 抱歉哦, 程序员正在玩命修复中 !',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.show=true;
|
||||
},
|
||||
destroyed(){
|
||||
this.$emit('pageDestroyed');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.customer-service{
|
||||
position: relative;
|
||||
padding-top: 2rem;
|
||||
min-height: 100vh;
|
||||
background-color: rgb(247, 247, 247);
|
||||
color: #333;
|
||||
}
|
||||
//立即咨询的提醒
|
||||
.el-message{
|
||||
top:100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div class="customer-service">
|
||||
<serverHeader :headerNote='headerNote'></serverHeader>
|
||||
<question
|
||||
:questionData='questionData'
|
||||
:show='show'></question>
|
||||
<serverCall
|
||||
:show='show'
|
||||
@openMsg='openMsg'></serverCall>
|
||||
<appFooter></appFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import serverHeader from './ServerHeader'
|
||||
import question from './Question'
|
||||
import serverCall from './ServerCall'
|
||||
import appFooter from '../AppFooter'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
questionData: [
|
||||
{
|
||||
id: 1, topImg: require('../../assets/img/customer-service-question1.png'),
|
||||
h5Title: '时间问题',
|
||||
list: [
|
||||
{
|
||||
quest: '快递长时间未送达?',
|
||||
result: `订单显示已接单, 但是快递长时间未送达 ,
|
||||
您可以查看订单详细信息, 尝试联系送单员 ,
|
||||
如果遇到无法解决的问题, 可以联系客服.`
|
||||
},
|
||||
{
|
||||
quest: '订单一直没有人接单?',
|
||||
result: `可能您的订单中显示您的快递太大 ,但是报酬
|
||||
较少 ,您可以尝试更改订单信息 ,或者重新发布.`
|
||||
},
|
||||
{
|
||||
quest: '超过两天未送达?',
|
||||
result: `如果已接单,但是超过两天未收到快递,
|
||||
但是订单显示已经签收,这时请联系客服处理.`
|
||||
},
|
||||
{
|
||||
quest: '订单异常？',
|
||||
result: '如果您对订单有任何疑问 ,您都可以联系客服处理.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2, topImg: require('../../assets/img/customer-service-question2.png'),
|
||||
h5Title: '快递问题',
|
||||
list: [
|
||||
{
|
||||
quest: '快递损坏或丢失?',
|
||||
result: '如果您快递送到手已经损坏 ,请联系客服协商处理'
|
||||
},
|
||||
{
|
||||
quest: '订单一直没有人接单?',
|
||||
result: `可能您的订单中显示您的快递太大 ,但是报酬
|
||||
较少 ,您可以尝试更改订单信息 ,或者重新发布.`
|
||||
},
|
||||
{
|
||||
quest: '订单已发布但信息错误?',
|
||||
result: `在没有接单的情况您可以自己选择取消订单 ,
|
||||
如果已经接单您可以联系送单员协助商量处理 ,
|
||||
或者联系客服.`
|
||||
},
|
||||
{
|
||||
quest: '订单异常？',
|
||||
result: '如果您对订单有任何疑问 ,您都可以联系客服处理.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3, topImg: require('../../assets/img/customer-service-question3.png'),
|
||||
h5Title: '其他问题',
|
||||
list: [
|
||||
{
|
||||
quest: '如何成为工作人员',
|
||||
result: '在个人中心>>加入我们 可以申请加入'
|
||||
},
|
||||
{
|
||||
quest: '订单异常？',
|
||||
result: '如果您对订单有任何疑问 ,您都可以联系客服处理.'
|
||||
},
|
||||
{
|
||||
quest: '订单时间异常？',
|
||||
result: '如果您对订单有任何疑问 ,您都可以联系客服处理.'
|
||||
},
|
||||
{
|
||||
quest: '订单信息异常？',
|
||||
result: '如果您对订单有任何疑问 ,您都可以联系客服处理.'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
headerNote: [
|
||||
'小手一抖 快递到手!',
|
||||
'我听过最动听的话是: 您的快递到了 !',
|
||||
'天冷了, 拿快递这种事就交给我们吧 !'
|
||||
],
|
||||
show: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
serverCall,
|
||||
question,
|
||||
serverHeader,
|
||||
appFooter
|
||||
},
|
||||
methods: {
|
||||
openMsg () {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
duration: 2000,
|
||||
message: '亲, 抱歉哦, 程序员正在玩命修复中 !',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.show = true
|
||||
},
|
||||
destroyed () {
|
||||
this.$emit('pageDestroyed')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.customer-service {
|
||||
position: relative;
|
||||
padding-top: 2rem;
|
||||
min-height: 100vh;
|
||||
background-color: rgb(247, 247, 247);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
//立即咨询的提醒
|
||||
.el-message {
|
||||
top: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,32 +4,32 @@
|
|||
<h4>联系客服</h4>
|
||||
<div class="callUs-body">
|
||||
<div class="chat">
|
||||
<el-tooltip class="item" effect="dark"
|
||||
content="在线咨询 不懂就找我 !"
|
||||
<el-tooltip class="item" effect="dark"
|
||||
content="在线咨询 不懂就找我 !"
|
||||
placement="top-start">
|
||||
<i class="icon"></i>
|
||||
</el-tooltip>
|
||||
</el-tooltip>
|
||||
<div class="online-chat">
|
||||
<h5>7x24 专业在线咨询</h5>
|
||||
<p>小新期待为您解决遇到的问题</p>
|
||||
</div>
|
||||
<el-tooltip class="item" effect="dark"
|
||||
content="点击 立即咨询 !"
|
||||
<el-tooltip class="item" effect="dark"
|
||||
content="点击 立即咨询 !"
|
||||
placement="top">
|
||||
<el-button :plain="true"
|
||||
@click="$emit('openMsg')">
|
||||
<el-button :plain="true"
|
||||
@click="$emit('openMsg')">
|
||||
<a class="askBtn" href="javascript:void(0);">立即咨询</a>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="call">
|
||||
<el-tooltip class="item" effect="dark"
|
||||
content="客服热线 : 5201314"
|
||||
<el-tooltip class="item" effect="dark"
|
||||
content="客服热线 : 10086"
|
||||
placement="top-end">
|
||||
<i class="icon"></i>
|
||||
</el-tooltip>
|
||||
</el-tooltip>
|
||||
<div class="callfor">
|
||||
<h5>服务热线 : 5201314</h5>
|
||||
<h5>服务热线 : 10086</h5>
|
||||
<p>24小时服务</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -49,10 +49,10 @@ export default {
|
|||
<style scoped lang='scss'>
|
||||
@import '../../style/mixin';
|
||||
.server-callUs{
|
||||
position: relative;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 1rem auto 5rem;
|
||||
background-color: #fff;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
h4{
|
||||
width: 100%;
|
||||
|
|
@ -83,11 +83,11 @@ export default {
|
|||
flex-grow: 1;
|
||||
align-items: center;
|
||||
margin: 0 1rem 2rem 2rem;
|
||||
border-right: 0.05rem solid #ccc;
|
||||
border-right: 0.05rem solid #ccc;
|
||||
i{
|
||||
background-image: url('../../assets/img/customer-service-footer-left.png');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.online-chat,
|
||||
.callfor{
|
||||
|
|
@ -106,7 +106,7 @@ export default {
|
|||
color: #999;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.askBtn{
|
||||
display: block;
|
||||
|
|
@ -116,7 +116,7 @@ export default {
|
|||
font-size: 0.7rem;
|
||||
border-radius: 0.2rem;
|
||||
background-color: #2396ff;
|
||||
color: #fff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1rem;
|
||||
@include transition(.5s);
|
||||
|
|
@ -125,9 +125,9 @@ export default {
|
|||
}
|
||||
}
|
||||
.call{
|
||||
display: flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 2rem;
|
||||
margin-left: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-grow: 1.3;
|
||||
i{
|
||||
|
|
@ -1,18 +1,8 @@
|
|||
<template>
|
||||
<div class="copyRight">
|
||||
<h5 class="owner">
|
||||
所有方 : <em>波哥无敌工作室</em> |
|
||||
<el-tooltip class="item" effect="dark"
|
||||
content="营业执照" placement="top">
|
||||
<a href="javascript:void(0)">营业执照</a>
|
||||
</el-tooltip>
|
||||
</h5>
|
||||
<p>
|
||||
<a href="http://www.miibeian.gov.cn" target="_black">赣ICP备18011821号-1 </a>
|
||||
| 江西行政管理
|
||||
Copyright @2016-{{new Date().getFullYear()}}
|
||||
校园闪电侠 All Rights Reserved
|
||||
</p>
|
||||
所有方 : <em>划水上岸</em>
|
||||
</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -47,6 +37,6 @@ export default {
|
|||
&:hover{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,138 +1,156 @@
|
|||
<template>
|
||||
<div class="footer">
|
||||
<div class="foot-link">
|
||||
<ul v-for='it in footList' :key='it.id'>
|
||||
<li><h5>{{it.title}}</h5></li>
|
||||
<li
|
||||
v-for='(list,index) in it.liList'
|
||||
:key='index'>
|
||||
<el-tooltip class="item" effect="dark"
|
||||
:content="list" placement="right">
|
||||
<a href="javascript:void(0);">{{list}}</a>
|
||||
</el-tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="callUs">
|
||||
<div class="serviceNumber">
|
||||
<span>24小时客服热线 :</span>
|
||||
<el-tooltip class="item" effect="dark"
|
||||
content="5201314" placement="top">
|
||||
<a href="javascript:void(0)">5201314</a>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="wechat">
|
||||
<span>联系我们 :</span>
|
||||
<el-popover
|
||||
v-for='it in wechatAQQ'
|
||||
:key='it.id'
|
||||
placement="top-end"
|
||||
:title="it.title"
|
||||
trigger="hover"
|
||||
content="">
|
||||
<el-button slot="reference">{{it.title}}</el-button>
|
||||
<slot name="content">
|
||||
<img :src='it.img'
|
||||
class="wechat-qq-img"
|
||||
:alt='it.title'/>
|
||||
</slot>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="foot-link">
|
||||
<ul v-for='it in footList' :key='it.id'>
|
||||
<li><h5>{{ it.title }}</h5></li>
|
||||
<li
|
||||
v-for='(list,index) in it.liList'
|
||||
:key='index'>
|
||||
<el-tooltip class="item" effect="dark"
|
||||
:content="list" placement="right">
|
||||
<a href="javascript:void(0);">{{ list }}</a>
|
||||
</el-tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="callUs">
|
||||
<div class="serviceNumber">
|
||||
<span>24小时客服热线 :</span>
|
||||
<el-tooltip class="item" effect="dark"
|
||||
content="10086" placement="top">
|
||||
<a href="javascript:void(0)">10086</a>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="wechat">
|
||||
<span>联系我们 :</span>
|
||||
<el-popover
|
||||
v-for='it in wechatAQQ'
|
||||
:key='it.id'
|
||||
placement="top-end"
|
||||
:title="it.title"
|
||||
trigger="hover"
|
||||
content="">
|
||||
<el-button slot="reference">{{ it.title }}</el-button>
|
||||
<slot name="content">
|
||||
<img :src='it.img'
|
||||
class="wechat-qq-img"
|
||||
:alt='it.title'/>
|
||||
</slot>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
footList:[
|
||||
{id:1,title:'用户帮助',liList:['我的客服','订单查询','投诉建议']},
|
||||
{id:2,title:'商务合作',liList:['我要开店','加盟指南','市场合作','开放平台']},
|
||||
{id:3,title:'用户帮助',liList:['平台介绍','加入我们','联系我们','规则中心','隐私条款']}
|
||||
],
|
||||
wechatAQQ:[
|
||||
{id:1,title:'微信',img:'./static/img/wechat.png'},
|
||||
{id:2,title:'QQ',img:'./static/img/home-QQ.jpg'}
|
||||
]
|
||||
data () {
|
||||
return {
|
||||
footList: [
|
||||
{id: 1, title: '用户帮助', liList: ['我的客服', '订单查询', '投诉建议']},
|
||||
{id: 2, title: '商务合作', liList: ['我要开店', '加盟指南', '市场合作', '开放平台']},
|
||||
{id: 3, title: '用户帮助', liList: ['平台介绍', '加入我们', '联系我们', '规则中心', '隐私条款']}
|
||||
],
|
||||
wechatAQQ: [
|
||||
{
|
||||
id: 1,
|
||||
title: '微信',
|
||||
img: require('../../assets/img/wechat.png')
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'QQ',
|
||||
img: require('../../assets/img/home-QQ.jpg')
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.footer{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
border-top: 0.05rem solid #ccc;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.foot-link{
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-right: 2.5rem;
|
||||
ul{
|
||||
padding:0 2.5rem;
|
||||
border-right: 0.05rem solid #ccc;
|
||||
h5{
|
||||
letter-spacing: 0.1rem;
|
||||
font-size: 0.8rem;
|
||||
color: #333;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
li{
|
||||
display: block;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
a{
|
||||
color: #666;
|
||||
letter-spacing: 0.05rem;
|
||||
font-size: 0.7rem;
|
||||
&:hover{
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.callUs{
|
||||
position: relative;
|
||||
.wechat{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.wechat-qq-img{
|
||||
max-width: 10rem;
|
||||
height: auto;
|
||||
}
|
||||
.serviceNumber{
|
||||
margin-bottom: 1rem;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
letter-spacing: 0.05rem;
|
||||
<style lang='scss' scoped>
|
||||
.footer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
border-top: 0.05rem solid #ccc;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:640px){
|
||||
.footer{
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 3rem;
|
||||
.foot-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-right: 2.5rem;
|
||||
|
||||
ul {
|
||||
padding: 0 2.5rem;
|
||||
border-right: 0.05rem solid #ccc;
|
||||
|
||||
h5 {
|
||||
letter-spacing: 0.1rem;
|
||||
font-size: 0.8rem;
|
||||
color: #333;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.callUs{
|
||||
margin-top: 3rem;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
.foot-link ul{
|
||||
padding: 0 3.5rem;
|
||||
}
|
||||
.foot-link ul:last-child{
|
||||
border-right: none;
|
||||
}
|
||||
.foot-link ul li{
|
||||
line-height: 1.5rem;
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
letter-spacing: 0.05rem;
|
||||
font-size: 0.7rem;
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.callUs {
|
||||
position: relative;
|
||||
|
||||
.wechat {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.wechat-qq-img {
|
||||
max-width: 10rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.serviceNumber {
|
||||
margin-bottom: 1rem;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
.callUs {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.foot-link ul {
|
||||
padding: 0 3.5rem;
|
||||
}
|
||||
.foot-link ul:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.foot-link ul li {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div class="appHome">
|
||||
<div class="appHome">
|
||||
<homeBanner
|
||||
:bannerImg='bannerImg'></homeBanner>
|
||||
:bannerImg='bannerImg'></homeBanner>
|
||||
<orderStep
|
||||
:orderStepData='orderStepData'></orderStep>
|
||||
:orderStepData='orderStepData'></orderStep>
|
||||
<weCanDo></weCanDo>
|
||||
<homeNews :newsSoure='newsSoure'></homeNews>
|
||||
<appFooter></appFooter>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -16,75 +16,82 @@ import orderStep from './OrderStepHelp'
|
|||
import weCanDo from './WeCanDo'
|
||||
import homeNews from './News'
|
||||
import appFooter from '../AppFooter'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
bannerImg:[
|
||||
{id:1,imgSrc:'./static/img/banner1.jpg'},
|
||||
{id:2,imgSrc:'./static/img/banner2.jpg'},
|
||||
{id:3,imgSrc:'./static/img/banner3.jpg'},
|
||||
{id:4,imgSrc:'./static/img/banner4.jpg'},
|
||||
{id:5,imgSrc:'./static/img/banner5.jpg'}
|
||||
],
|
||||
orderStepData:[
|
||||
{id:1,title:'1',
|
||||
tips:`注册成功后,登录状态`
|
||||
},
|
||||
{id:2,title:'2',
|
||||
tips:`点击个人中心,完善姓名、
|
||||
data () {
|
||||
return {
|
||||
bannerImg: [
|
||||
{id: 1, imgSrc: require('../../assets/img/banner1.jpg')},
|
||||
{id: 2, imgSrc: require('../../assets/img/banner2.jpg')},
|
||||
{id: 3, imgSrc: require('../../assets/img/banner3.jpg')},
|
||||
{id: 4, imgSrc: require('../../assets/img/banner4.jpg')},
|
||||
{id: 5, imgSrc: require('../../assets/img/banner5.jpg')}
|
||||
],
|
||||
orderStepData: [
|
||||
{
|
||||
id: 1, title: '1',
|
||||
tips: `注册成功后,登录状态`
|
||||
},
|
||||
{
|
||||
id: 2, title: '2',
|
||||
tips: `点击个人中心,完善姓名、
|
||||
手机号等个人信息以便于工作人员联系您,
|
||||
然后就可以发布订单啦`
|
||||
},
|
||||
{id:3,title:'3',
|
||||
tips:`工作人员选择接单,
|
||||
},
|
||||
{
|
||||
id: 3, title: '3',
|
||||
tips: `工作人员选择接单,
|
||||
送到您手上,由您签收,订单完成。`
|
||||
}
|
||||
],
|
||||
newsSoure:[
|
||||
{id:1,title:'校园资讯',imgSrc:'./static/img/home-news-pic1.jpg',
|
||||
article:`刺猬在天冷时彼此靠拢取暖，但是保持一定距离，以免互相刺伤。
|
||||
要去保持亲密的重要方法，乃是要保持适当的距离。测验一个人的智力是否是属于上乘，
|
||||
只要看脑子里能否是能同时容纳两种相反的思想，而无碍于其处世行事。`
|
||||
},
|
||||
{id:2,title:'最新科技',imgSrc:'./static/img/home-news-pic2.jpg',
|
||||
article:`可是不知道何时起，仿佛自己更加喜欢熟悉的味道，可能觉得那更加踏实吧，
|
||||
熟悉的味道总是让我们少了很多担心，多了一份踏实很多时候，
|
||||
可能是害怕太多的顾虑，所有干脆放弃，也许在将来的某一刻，
|
||||
我会后悔我现在的选择，但是我却从来的没有忘记我当初的决心。`
|
||||
},
|
||||
{id:3,title:'公司资讯',imgSrc:'./static/img/home-news-pic3.jpg',
|
||||
article:`当我还住在她丢掉的那首歌里，怀抱所有音符；当我仍在她丢掉的那本书里面，
|
||||
封面封底夹着我所有的白昼与黑夜的时候，阿谷，这个如山间清风，
|
||||
拂面朗月的彝族姑娘已经给我发了好多信息。或许，伤悲的基调定性。`
|
||||
},
|
||||
{id:4,title:'娱乐八卦',imgSrc:'./static/img/home-news-pic2.jpg',
|
||||
article:`当我还住在她丢掉的那首歌里，怀抱所有音符；当我仍在她丢掉的那本书里面，
|
||||
封面封底夹着我所有的白昼与黑夜的时候，阿谷，这个如山间清风，
|
||||
拂面朗月的彝族姑娘已经给我发了好多信息。或许，伤悲的基调定性。`
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components:{
|
||||
homeBanner,
|
||||
orderStep,
|
||||
weCanDo,
|
||||
homeNews,
|
||||
appFooter
|
||||
},
|
||||
mounted() {
|
||||
this.$emit('scrollShowComponent',this.$children);
|
||||
},
|
||||
destroyed(){
|
||||
this.$emit('pageDestroyed');
|
||||
],
|
||||
newsSoure: [
|
||||
{
|
||||
id: 1,
|
||||
title: '业务特色',
|
||||
imgSrc: require('../../assets/img/home-news-pic1.jpg'),
|
||||
article: `覆盖校园内任何一个人的快递，为您提供便捷式的快递服务体验；通过“网络+快递”的服务方式，为校园学子提供快递物流服务的平台。`
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '功能介绍',
|
||||
imgSrc: require('../../assets/img/home-news-pic2.jpg'),
|
||||
article: `致力于做好拥有自己特色的校园小飞侠快递平台，依托网络资源，做好校园快递的搬运工，为客户提供优质服务。`
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '注册咨询',
|
||||
imgSrc: require('../../assets/img/home-news-pic3.jpg'),
|
||||
article: `关于小飞侠的注册，首先应注册信息成为普通用户，之后通过联系后台管理，申请成为小飞侠快递搬运工。`
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '业务咨询',
|
||||
imgSrc: require('../../assets/img/home-news-pic3.jpg'),
|
||||
article: '覆盖校园，在校园内所有的快递小飞侠均可配送到达。'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
homeBanner,
|
||||
orderStep,
|
||||
weCanDo,
|
||||
homeNews,
|
||||
appFooter
|
||||
},
|
||||
mounted () {
|
||||
this.$emit('scrollShowComponent', this.$children)
|
||||
},
|
||||
destroyed () {
|
||||
this.$emit('pageDestroyed')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.appHome{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.appHome {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="home-news">
|
||||
<div class="news-title">
|
||||
<h3>精彩瞬间</h3>
|
||||
<h3>小飞侠服务</h3>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="news-body">
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="ns-item">
|
||||
<div class="out-border"></div>
|
||||
<transition name='opa'>
|
||||
<img :src="obj.imgSrc" v-if="isCmptShow" alt="精彩瞬间">
|
||||
<img :src="obj.imgSrc" v-if="isCmptShow" alt="小飞侠服务">
|
||||
</transition>
|
||||
<div class="item-body">
|
||||
<h4>{{obj.title}}</h4>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
<div class="w-cont">
|
||||
<div class="item"
|
||||
v-for='(it,index) in title'
|
||||
v-for='(it,index) in title'
|
||||
:key=it.id>
|
||||
<div class="item-title">
|
||||
<div class="item-bg" :class="'bg'+index"></div>
|
||||
|
|
@ -29,24 +29,17 @@ export default {
|
|||
return{
|
||||
title:[
|
||||
{id:1,title:'足不出户',
|
||||
body:`我们竭诚为您服务,让您足不出户就可以拿到自己的快递,
|
||||
我们竭诚为您服务,让您足不出户就可以拿到自己的快递
|
||||
我们竭诚为您服务,让您足不出户就可以拿到自己的快递`
|
||||
body:`我们小飞侠属于校园快递，我们可以提供优质的快递服务，
|
||||
让您足不出户就可以拿到自己的快递`
|
||||
},
|
||||
{id:2,title:'高效快捷',
|
||||
body:`高效快捷,让您足不出户就可以拿到自己的快递,
|
||||
我们竭诚为您服务,让足不出户就可以拿到自己的快递
|
||||
我们竭诚为您服务,让您足不出户就可以拿到自己的快递`
|
||||
body:`小飞侠在接到快递后的一定时间内，保证将快递准确无误的送达您的手上，节省您的时间`
|
||||
},
|
||||
{id:3,title:'安全保障',
|
||||
body:`安全保障,让您足不出户就可以拿到自己的快递,
|
||||
我们竭诚为您服务,您足不出户就可以拿到自己的快递
|
||||
我们竭诚为您服务,让您足不出户就可以拿到自己的快递`
|
||||
body:`在小飞侠接单时，将会把派送员的信息送达您的手机，让你可以随时查询快递的物流信息`
|
||||
},
|
||||
{id:4,title:'贴心服务',
|
||||
body:`贴心服务,让您足不出户就可以拿到自己的快递,
|
||||
我们竭诚为您服务,您足不出户就可以拿到自己的快递
|
||||
我们竭诚为您服务,让您足不出户就可以拿到自己的快递`
|
||||
body:`用户在下单时，可以填写备注信息，小飞侠将会按备注信息进行派送，确保我们可以为您提供最贴心的服务`
|
||||
},
|
||||
],
|
||||
isCmptShow:false
|
||||
|
|
@ -64,18 +57,18 @@ export default {
|
|||
margin-bottom: 10rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.w-title{
|
||||
.w-title{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
//margin-bottom: 1rem;
|
||||
h2{
|
||||
h2{
|
||||
display: block;
|
||||
//line-height: 2rem;
|
||||
margin: 0 auto 0.6rem;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 4px;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 4px;
|
||||
font-size: 1.5rem;
|
||||
color: rgb(99, 180, 210);
|
||||
&::after{
|
||||
content:'/Merits';
|
||||
|
|
@ -103,7 +96,7 @@ export default {
|
|||
display: flex;
|
||||
justify-content:space-around;
|
||||
flex-wrap: wrap;
|
||||
width: 95%;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 5rem;
|
||||
@include box-shadow(0 0 0.3rem 0.3rem #ccc);
|
||||
|
|
@ -124,14 +117,14 @@ $bd-radius:$item-title-h /2 *1.1;
|
|||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
width: $item--title-w;
|
||||
min-width: $item--title-w;
|
||||
height: $item-title-h;
|
||||
margin-top: 5rem;
|
||||
@include border-radius(50%);
|
||||
@include border-radius(50%);
|
||||
@include transition(.5s);
|
||||
background-color: #fff;
|
||||
background-color: #fff;
|
||||
&:hover{
|
||||
background-color: lighten(#c9e4ff,4%);
|
||||
}
|
||||
|
|
@ -144,20 +137,20 @@ $bd-radius:$item-title-h /2 *1.1;
|
|||
}
|
||||
.item-body{
|
||||
width: $item-w - 2rem;
|
||||
margin-top: 2rem;
|
||||
text-align:justify;
|
||||
text-justify:inter-ideograph;
|
||||
margin-top: 2rem;
|
||||
text-align:justify;
|
||||
text-justify:inter-ideograph;
|
||||
P{
|
||||
line-height: 1.2rem;
|
||||
letter-spacing: 3px;
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
text-indent: 2rem;
|
||||
text-indent: 2rem;
|
||||
&::selection{
|
||||
background-color:#93C;
|
||||
background-color:#93C;
|
||||
color:#FCF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-title:hover .item-bg{
|
||||
animation: rotate 1s linear infinite;
|
||||
|
|
@ -167,7 +160,7 @@ $bd-radius:$item-title-h /2 *1.1;
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
animation: rotate 5s ease-in infinite alternate;
|
||||
z-index: -1;
|
||||
z-index: -1;
|
||||
&:after,
|
||||
&:before{
|
||||
content:'';
|
||||
|
|
@ -176,17 +169,17 @@ $bd-radius:$item-title-h /2 *1.1;
|
|||
left: -$item--title-w /20;
|
||||
width: $item--title-w *1.1;
|
||||
height:$item-title-h /2 *1.1;
|
||||
background-color: #00f2fe;
|
||||
background-color: #00f2fe;
|
||||
background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
|
||||
|
||||
}
|
||||
&:before{
|
||||
top: -$item--title-w /20;
|
||||
@include border-radius($bd-radius $bd-radius 0 0);
|
||||
@include border-radius($bd-radius $bd-radius 0 0);
|
||||
}
|
||||
&:after{
|
||||
bottom: -$item--title-w /20;
|
||||
@include border-radius(0 0 $bd-radius $bd-radius);
|
||||
@include border-radius(0 0 $bd-radius $bd-radius);
|
||||
background-color:lighten($color: #4facfe, $amount: 15%);
|
||||
background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default {
|
|||
data () {
|
||||
return {
|
||||
showTips: false,
|
||||
img: './static/img/login-qq.png'
|
||||
img: require('../../assets/img/login-qq.png')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -187,7 +187,7 @@ const router = new Router({
|
|||
path: '/aboutus',
|
||||
name: 'AboutUs',
|
||||
components: {
|
||||
default: () => import('@com/aboutUs/AboutUs'),
|
||||
default: () => import('@com/aboutus/AboutUs'),
|
||||
header: () => import('@com/AppHeader'),
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Loading…
Reference in New Issue