Skip to content

A
antaile-web
Commit 599cc9ce by wangyalan-git
Options

首页调整

parent e043575d
Showing with 353 additions and 53 deletions
package-lock.json
......@@ -7324,6 +7324,11 @@
"type-check": "~0.3.2"
}
},
"lib-flexible": {
"version": "0.3.2",
"resolved": "https://registry.npm.taobao.org/lib-flexible/download/lib-flexible-0.3.2.tgz",
"integrity": "sha1-BvWnSDIxSi01wSA5vJw8otrqpCY="
},
"lines-and-columns": {
"version": "1.1.6",
"resolved": "https://registry.npm.taobao.org/lines-and-columns/download/lines-and-columns-1.1.6.tgz",
......@@ -9370,6 +9375,12 @@
}
}
},
"postcss-pxtorem": {
"version": "6.0.0",
"resolved": "https://registry.nlark.com/postcss-pxtorem/download/postcss-pxtorem-6.0.0.tgz",
"integrity": "sha1-8iik0F2Kc/BkLquulQ4rGYNjZtc=",
"dev": true
},
"postcss-reduce-initial": {
"version": "4.0.3",
"resolved": "https://registry.npm.taobao.org/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz",
......
package.json
......@@ -11,6 +11,7 @@
"animate.css": "^3.5.1",
"core-js": "^3.6.5",
"element-ui": "^2.15.1",
"lib-flexible": "^0.3.2",
"vue": "^2.6.11",
"vue-router": "^3.5.1",
"vue-seamless-scroll": "^1.1.23",
......@@ -24,6 +25,7 @@
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.1",
"postcss-pxtorem": "^6.0.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
......
public/index.html
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
......
src/components/Header.vue
<template>
<div class="header">
<div style="display: flex;flex: 1;">
<div class="header" >
<div style="display: flex; flex: 1" v-if="deviceType == 2">
<img src="@/assets/images/logo.png" alt="" class="logo" />
<ul class="right-ul">
<li>纪念馆列表</li>
<li>APP下载</li>
</ul>
<ul class="right-ul" >
<li>纪念馆列表</li>
<li>APP下载</li>
</ul>
</div>
<img src="@/assets/images/logo.png" alt="" class="logo" v-else />
<ul class="right-ul">
<li><img src="@/assets/images/Signin.png" alt="" class="avatar" />登录</li>
<li>用户协议</li>
<li>隐私协议</li>
<li>
<img src="@/assets/images/Signin.png" alt="" class="avatar" />登录
</li>
<li v-if="deviceType == 2">用户协议</li>
<li v-if="deviceType == 2">隐私协议</li>
</ul>
</div>
</template>
......@@ -18,7 +21,23 @@
<script>
export default {
name: "header",
data() {
return {
deviceType: null,
};
},
props: {},
mounted() {
if (this.common.isMobile()) {
this.deviceType = 1;
} else {
this.deviceType = 2;
}
},
methods: {
},
};
</script>
......@@ -31,16 +50,18 @@ export default {
justify-content: space-between;
align-items: center;
padding: 0 calc((100% - 1200px) / 2);
position:fixed;
position: fixed;
left: 0;
right: 0;
z-index: 999;
.logo{
>.logo{
margin-left: 38px;
}
.logo {
width: 200px;
margin-right: 30px;
object-fit: contain;
}
}
.header .right-ul {
display: flex;
......@@ -60,4 +81,4 @@ export default {
margin-right: 10px;
}
}
</style>
</style>
\ No newline at end of file
src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import '@/assets/styles/element-variables.scss'
import animated from 'animate.css' // npm install animate.css --save安装，在引入
Vue.use(animated)
Vue.config.productionTip = false
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import ElementUI from "element-ui";
import "lib-flexible";
import "@/assets/styles/element-variables.scss";
import animated from "animate.css"; // npm install animate.css --save安装，在引入
Vue.use(animated);
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.directive('class', {
inserted: function (el, binding) {
// 聚焦元素
binding.addClass = () => {
const { top } = el.getBoundingClientRect()
const h = document.documentElement.clientHeight || document.body.clientHeight
// console.log("h",top<h)
if (top < h) {
el.className = binding.value
if (binding.addClass) {
window.removeEventListener('mousewheel', binding.addClass)
}
}
}
import common from "@/utils/commonFunctions";
window.addEventListener('mousewheel', binding.addClass)
binding.addClass()
},
unbind: function (el, binding) {
if (binding.addClass) {
window.removeEventListener('mousewheel', binding.addClass)
console.log('取消事件绑定')
}
}
})
Vue.prototype.common = common; // 公共函数
new Vue({
router,
render: h => h(App),
}).$mount('#app')
render: (h) => h(App),
}).$mount("#app");
src/router/index.js
......@@ -10,6 +10,11 @@ const routes = [
component: () => import('@/views/Home/index')
},
{
path: '/mindex',
name: 'mindex',
component: () => import('@/views/Home/mindex')
},
{
path: '/login',
name: 'login',
component: () => import('@/views/Login/index')
......
src/utils/commonFunctions.js 0 → 100644
import { formatDate } from './date'
export default {
isMobile() {
let flag = navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
);
return flag;
},
// // 设置默认图片
// defaultImg() {
// return 'this.src="' + require('@/assets/images/default.png') + '"'
// },
// defaultAd() {
// return 'this.src="' + require('@/assets/images/bannerthree.png') + '"'
// },
// defaultAvatar() {
// return 'this.src="' + require('@/assets/images/portraittxs.png') + '"'
// },
// defaultDraw() {
// return 'this.src="' + require('@/assets/draw/banner.png') + '"'
// },
primaryColor() {
return '#41B9B2'
},
splitString(value) {
let flag = ''
if (!value) {
return
}
if(value.indexOf(',')!=-1){
flag = ','
}else {
flag = ' '
}
let arr = value.split(flag)
return arr
},
// 金额显示过滤 两位小数点，不足补0
priceFilter(value) {
if (!value) {
return '0.00'
}
var valueStr = Math.round(parseFloat(value) * 100) / 100
var xsd = valueStr.toString().split('.')
if (xsd.length == 1) {
valueStr = valueStr.toString() + '.00'
return valueStr
}
if (xsd.length > 1) {
if (xsd[1].length < 2) {
value = value.toString() + '0'
}
return value
}
},
renderTime(date) {
if (!date) {
return
}
var dateee = new Date(date).toJSON()
return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
},
formatTime(value,format) {
let formatStr = ''
if (value) {
let date = new Date(value)
if(format){
formatStr = format
}else {
formatStr = 'yyyy-MM-dd hh:mm:ss'
}
return formatDate(date, formatStr)
} else {
return ''
}
},
isLogin() {
let token = localStorage.getItem('token')
if (token) {
return true
} else {
return false
}
},
goLogin() {
this.$router.push({
path: '/login'
})
},
/*
* 获取某个元素下标
* arr: 传入的数组
* obj: 需要获取下标的元素
* */
getArrayIndex(arr, obj) {
var i = arr.length
while (i--) {
if (arr[i] === obj) {
return i
}
}
return -1
},
uuid() {
var s = []
var hexDigits = "0123456789abcdef"
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
}
s[14] = "4"
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
s[8] = s[13] = s[18] = s[23] = "-"
var uuid = s.join("")
return uuid
},
showPic(url, params) {
if (url && params && url.indexOf('http://xieku.oss-cn-beijing.aliyuncs.com') != -1) {
return url + params
}
return url
}
}
src/utils/date.js 0 → 100644
// date.js
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
}
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
export function str2Date(dateStr, separator) {
if (!separator) {
separator = "-";
}
let dateArr = dateStr.split(separator);
let year = parseInt(dateArr[0]);
let month;
//处理月份为04这样的情况
if (dateArr[1].indexOf("0") == 0) {
month = parseInt(dateArr[1].substring(1));
} else {
month = parseInt(dateArr[1]);
}
let day = parseInt(dateArr[2]);
let date = new Date(year, month - 1, day);
return date;
}
src/utils/request.js 0 → 100644
// import axios from 'axios'
// import store from '../store'
// import router from '../router'
// import { Message } from 'view-design'
// // 创建axios实例
// const service = axios.create({
// baseURL: 'https://api.ecrentcn.com/mall-portal/',
// // baseURL: "http://api.v2.cnxieku.com/mall-portal/",
// // baseURL: "http://192.168.31.127:8201/mall-portal/",
// timeout: 60000 // 请求超时时间
// })
// // request拦截器
// service.interceptors.request.use(config => {
// config.headers['clientType'] = 5
// if (store.state.token) {
// config.headers['Authorization'] = store.state.token
// // Loading.service() // 请求开始 开启loading
// }
// return config
// }, error => {
// // Do something with request error
// window.console.log(error) // for debug
// Promise.reject(error)
// })
// // respone拦截器
// service.interceptors.response.use(
// response => {
// /**
// * code为非200是抛错 可结合自己业务进行修改
// */
// const res = response.data
// if (res.code !== 200) {
// // 401:未登录;
// if (res.code === 401 || res.code === 403) {
// store.commit('SET_TOKEN', '')
// router.replace({
// name: 'login',
// query: { redirect: router.currentRoute.fullPath } // 登录后再跳回此页面时要做的配置
// })
// } else {
// if (res.message != '支付失败') {
// Message.error(res.message)
// }
// }
// return Promise.reject(res)
// } else {
// return response.data
// }
// },
// error => {
// // 错误信息状态码提示
// if (error.response) {
// switch (error.response.status) {
// case 400:
// Message.error('数据请求错误')
// break
// case 401:
// // Message.error('未授权，请重新登录')
// store.commit('SET_TOKEN', '')
// router.replace({
// name: 'login',
// query: { redirect: router.currentRoute.fullPath } // 登录后再跳回此页面时要做的配置
// })
// break
// case 403:
// Message.error('拒绝访问')
// break
// case 404:
// Message.error('请求错误，未找到该资源')
// break
// case 405:
// Message.error('请求方法未允许')
// break
// case 408:
// Message.error('请求超时')
// break
// case 500:
// Message.error('服务器异常')
// break
// case 501:
// Message.error('网络未实现')
// break
// case 502:
// Message.error('网络错误')
// break
// case 503:
// Message.error('服务不可用')
// break
// case 504:
// Message.error('网络超时')
// break
// case 505:
// Message.error('http版本不支持该请求')
// break
// }
// }
// // window.console.log('err' + error)
// // Message.error('服务器开小差了，请稍后重试')
// return Promise.reject(error)
// }
// )
// export default service
src/vue.config.js
module.exports={
}
\ No newline at end of file
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 75 //根据设计图
//375的图就给37.5，也就是1rem=37.5px
})
]
}
}
},
}
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