Skip to content

A
antaile-web
Commit 995ede50 by wangyalan-git
Options

公共组件头部和底部

parent 9a66d74f
Showing with 561 additions and 17 deletions
package-lock.json
...@@ -2380,6 +2380,14 @@ ...@@ -2380,6 +2380,14 @@
"integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=", "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
"dev": true "dev": true
}, },
"async-validator": {
"version": "1.8.5",
"resolved": "https://registry.nlark.com/async-validator/download/async-validator-1.8.5.tgz",
"integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
"requires": {
"babel-runtime": "6.x"
}
},
"asynckit": { "asynckit": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz", "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
...@@ -2433,6 +2441,11 @@ ...@@ -2433,6 +2441,11 @@
"resolve": "^1.12.0" "resolve": "^1.12.0"
} }
}, },
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
},
"babel-loader": { "babel-loader": {
"version": "8.2.2", "version": "8.2.2",
"resolved": "https://registry.nlark.com/babel-loader/download/babel-loader-8.2.2.tgz", "resolved": "https://registry.nlark.com/babel-loader/download/babel-loader-8.2.2.tgz",
...@@ -2484,6 +2497,27 @@ ...@@ -2484,6 +2497,27 @@
"@babel/helper-define-polyfill-provider": "^0.2.0" "@babel/helper-define-polyfill-provider": "^0.2.0"
} }
}, },
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.nlark.com/babel-runtime/download/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"core-js": {
"version": "2.6.12",
"resolved": "https://registry.nlark.com/core-js/download/core-js-2.6.12.tgz",
"integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
},
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
"integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
}
}
},
"balanced-match": { "balanced-match": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714233441&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz", "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714233441&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
...@@ -4135,8 +4169,7 @@ ...@@ -4135,8 +4169,7 @@
"deepmerge": { "deepmerge": {
"version": "1.5.2", "version": "1.5.2",
"resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz", "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
"integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=", "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
"dev": true
}, },
"default-gateway": { "default-gateway": {
"version": "5.0.5", "version": "5.0.5",
...@@ -4583,6 +4616,19 @@ ...@@ -4583,6 +4616,19 @@
"integrity": "sha1-bTxXfl9aSJBLqJFGR0CJbAXjvbE=", "integrity": "sha1-bTxXfl9aSJBLqJFGR0CJbAXjvbE=",
"dev": true "dev": true
}, },
"element-ui": {
"version": "2.15.1",
"resolved": "https://registry.nlark.com/element-ui/download/element-ui-2.15.1.tgz",
"integrity": "sha1-raAKpuMsAndKLndWPdhGaPgTzf8=",
"requires": {
"async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0",
"deepmerge": "^1.2.0",
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0",
"throttle-debounce": "^1.0.1"
}
},
"elliptic": { "elliptic": {
"version": "6.5.4", "version": "6.5.4",
"resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.4.tgz", "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.4.tgz",
...@@ -7691,6 +7737,11 @@ ...@@ -7691,6 +7737,11 @@
"integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=", "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
"dev": true "dev": true
}, },
"normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
},
"npm-run-path": { "npm-run-path": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz", "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
...@@ -9301,6 +9352,11 @@ ...@@ -9301,6 +9352,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true "dev": true
}, },
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
},
"resolve": { "resolve": {
"version": "1.20.0", "version": "1.20.0",
"resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz", "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz",
...@@ -10491,6 +10547,11 @@ ...@@ -10491,6 +10547,11 @@
"neo-async": "^2.6.0" "neo-async": "^2.6.0"
} }
}, },
"throttle-debounce": {
"version": "1.1.0",
"resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz?cache=0&sync_timestamp=1604313832516&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-1.1.0.tgz",
"integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
},
"through": { "through": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz", "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
...@@ -11156,6 +11217,11 @@ ...@@ -11156,6 +11217,11 @@
} }
} }
}, },
"vue-router": {
"version": "3.5.1",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz?cache=0&sync_timestamp=1617697788171&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.5.1.tgz",
"integrity": "sha1-7fPPSQeVLR4Fg+B5I3Igxf9utsk="
},
"vue-style-loader": { "vue-style-loader": {
"version": "4.1.3", "version": "4.1.3",
"resolved": "https://registry.nlark.com/vue-style-loader/download/vue-style-loader-4.1.3.tgz", "resolved": "https://registry.nlark.com/vue-style-loader/download/vue-style-loader-4.1.3.tgz",
......
package.json
...@@ -9,7 +9,9 @@ ...@@ -9,7 +9,9 @@
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vue": "^2.6.11" "element-ui": "^2.15.1",
"vue": "^2.6.11",
"vue-router": "^3.5.1"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",
...@@ -18,6 +20,8 @@ ...@@ -18,6 +20,8 @@
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"
}, },
"eslintConfig": { "eslintConfig": {
......
src/App.vue
<template> <template>
<div id="app"> <div id="app">
<img alt="Vue logo" src="./assets/logo.png"> <router-view/>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div> </div>
</template> </template>
<script> <script>
import HelloWorld from './components/HelloWorld.vue'
export default { export default {
name: 'App', name: 'App',
components: { components: {
HelloWorld
} }
} }
</script> </script>
<style> <style>
#app { #app{
font-family: Avenir, Helvetica, Arial, sans-serif; display: flex;
-webkit-font-smoothing: antialiased; flex-direction: column;
-moz-osx-font-smoothing: grayscale; min-height: 100vh;
text-align: center; }
color: #2c3e50;
margin-top: 60px;
}
</style> </style>
src/assets/styles/element-variables.scss 0 → 100644
/* 改变主题色变量 */
$--color-primary: #CAA774;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
* {
margin: 0;
padding: 0;
}
html, body {
font-size: 12px;
min-height: 100%;
}
.font12 {
font-size: 12px;
}
.font14 {
font-size: 14px;
}
.font18 {
font-size: 18px;
}
.font24 {
font-size: 24px;
}
.font30 {
font-size: 30px;
}
.bold {
font-weight: bold;
}
a {
color: #020202;
}
a:hover {
color: $--color-primary;
}
img {
width: 100%;
object-fit: cover;
}
.my_icon {
width: 15px;
margin-right: 5px;
vertical-align: middle;
}
.banner {
img {
max-height: 300px;
}
}
ul,
ol,
dl {
list-style: none;
}
.align_left {
text-align: left;
}
.align_center {
text-align: center;
}
.clearFix {
zoom: 1;
}
.clearFix:after {
content: '';
display: block;
height: 0;
clear: both;
}
.flex,
.flexRow {
display: flex;
justify-content: space-between;
align-items: center;
}
.flexCol {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.flex_start {
display: flex;
align-items: baseline;
}
.pointer {
cursor: pointer;
}
.right {
list-style: none;
}
.mr_10 {
margin-right: 10px;
}
.mt_10 {
margin-top: 10px;
}
.mt_20 {
margin-top: 20px;
}
.ml_10 {
margin-left: 10px;
}
.mb_10 {
margin-bottom: 10px;
}
.mr_15 {
margin-right: 15px;
}
.mr_20 {
margin-right: 20px;
}
.position_relative {
position: relative;
}
.primary {
color: $--color-primary !important;
}
.back_primary {
background: $--color-primary !important;
color: #fff !important;
}
.border_primary {
border: 1px solid $--color-primary;
}
.back_two {
background: #f17123 !important;
color: #fff !important;
}
.back_three {
background: #ffb400 !important;
color: #fff !important;
}
//图片放大功能
.zoom {
width: 220px;
height: 220px;
overflow: hidden;
}
.zoom_img {
transition: all 1s;
}
.zoom_img:hover {
transform: scale(1.2);
}
@import "~element-ui/packages/theme-chalk/src/index";
\ No newline at end of file
src/components/Footer.vue 0 → 100644
<template>
<div class="footer">
<div>安泰乐官网 I 福建福鼎姿国寺 I 江苏沭阳圆觉禅林</div>
<div class="tip">
安泰乐集团有限公司 ｜ Copyright ATL All Rights Reserved
闽ICP备16020886号-3
</div>
</div>
</template>
<script>
export default {
name: "footer",
props: {},
};
</script>
<style lang="scss" scoped>
.footer {
background: #f3f3f3;
text-align: center;
padding: 35px calc((100% - 1200px) / 2);
color: #A9A9A9;
font-size: 20px;
}
.tip{
font-size: 16px;
}
</style>
src/components/Header.vue 0 → 100644
<template>
<div class="header">
<img src="@/assets/logo.png" alt="" class="logo" />
<ul class="right-ul">
<li><img src="@/assets/logo.png" alt="" class="avatar" />登录</li>
<li>用户协议</li>
<li>隐私协议</li>
</ul>
</div>
</template>
<script>
export default {
name: "header",
props: {},
};
</script>
<style lang="scss" scoped>
.header {
background: #181f2a;
height: 70px;
line-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 calc((100% - 1200px) / 2);
.logo{
width: 72px;
}
}
.header .right-ul {
display: flex;
align-items: center;
> li {
margin-right: 25px;
color: #ccc;
font-size: 16px;
display: flex;
align-items: center;
}
.avatar {
width: 29px;
height: 29px;
border-radius: 50%;
margin-right: 10px;
}
}
</style>
src/main.js
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import '@/assets/styles/element-variables.scss'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({ new Vue({
router,
render: h => h(App), render: h => h(App),
}).$mount('#app') }).$mount('#app')
src/router/index.js 0 → 100644
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'index',
component: () => import('@/views/Home/index')
},
{
path: '/login',
name: 'login',
component: () => import('@/views/Login/index')
},
{
path: '/register',
name: 'register',
component: () => import('@/views/Login/register')
},
{
path: '/404',
component: () => import('@/views/ErrorPage/errorPage.vue')
},
{
path: '*',
redirect: '/404'
}
]
const router = new VueRouter({
mode: 'history',
routes
})
// router.beforeEach((to, from, next) => {
// const domain = location.hostname.replace(/\.test\.cnxieku\.com/g, '')
// // const domain = location.hostname.replace(/\.cnxieku\.com/g, '')
// if (domain && domain != 'www' && domain != 'localhost' && domain != 'market'
// && JSON.stringify(to.query) == '{}') {
// // 要跳转店铺的独有域名主页
// getShopIdByDomain({ domain }).then(res => {
// const shopId = res.data
// if (shopId) {
// next('/shop/shopIndex?shopId=' + shopId)
// } else {
// location.href = new Vue().DOMAIN_URL
// }
// }).catch(err => {
// location.href = new Vue().DOMAIN_URL
// })
// } else {
// if (to.query.t) {
// store.commit('SET_TOKEN', to.query.t)
// store.dispatch('GetUserInfo')
// }
// next()
// }
// })
router.afterEach((to, from) => {
window.scrollTo(0, 0) // 解决页面跳转页面不在顶端
console.log(to,from)
if (to.query.t) {
let newQuery = JSON.parse(JSON.stringify(to.query))
delete newQuery.t
router.replace({ query: newQuery })
}
})
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g
const isChunkLoadFailed = error.message.match(pattern)
const targetPath = router.history.pending.fullPath
if (isChunkLoadFailed) {
router.replace(targetPath)
}
})
export default router
src/views/ErrorPage/errorPage.vue 0 → 100644
<template>
<div class="error">
<Row type="flex"
align="middle"
:gutter="16">
<Col span="12">
<img :src="img_404"
alt="404">
</Col>
<Col span="10"
class="right"
offset="1">
<h1 class="font36">OOPS!</h1>
<p class="font24">很抱歉，页面它不小心迷路了！</p>
<div style="color:#909399;font-size: 14px">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
<Button size="large"
style="width: 120px;margin-top: 20px;"
type="primary"
@click="handleGoMain">返回首页
</Button>
</Col>
</Row>
</div>
</template>
<script>
import img_404 from '@/assets/images/gif_404.gif'
export default {
name: 'ErrorPage',
data() {
return {
img_404
}
},
methods: {
handleGoMain() {
this.$router.push({ path: '/' })
}
}
}
</script>
<style lang="scss" scoped>
.error {
width: 80vw;
height: 100vh;
min-width: 1200px;
margin: 0 auto;
> div {
padding: 50px 0;
}
}
.right {
text-align: left;
padding-left: 30px;
.font36 {
font-size: 36px;
margin-bottom: 20px;
}
.font24 {
font-size: 24px;
margin-bottom: 20px;
}
}
</style>
src/views/Home/index.vue 0 → 100644
<template>
<div >
<Header></Header>
<Footer></Footer>
</div>
</template>
<script>
import Header from "@/components/Header"
import Footer from "@/components/Footer"
export default {
name: 'index',
components: {
Header,
Footer
},
props: {
}
}
</script>
<style scoped>
</style>
src/components/HelloWorld.vue → src/views/Login/index.vue
<template> <template>
<div class="hello"> <div class="hello">
<h1>{{ msg }}</h1> <h1>login</h1>
<p> <p>
For a guide and recipes on how to configure / customize this project,<br> For a guide and recipes on how to configure / customize this project,<br>
check out the check out the
......
src/views/Login/register.vue 0 → 100644
<template>
<div >
<Header></Header>
<Footer></Footer>
</div>
</template>
<script>
import Header from "@/components/Header"
import Footer from "@/components/Footer"
export default {
name: 'index',
components: {
Header,
Footer
},
props: {
}
}
</script>
<style scoped>
</style>
src/vue.config.js 0 → 100644
module.exports={
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment