Skip to content

E
exhibition_page
提交 3aa9cdc4 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

增加缩放适配

上级 265a2d3b
隐藏空白字符变更
内嵌 并排
正在显示 包含 483 行增加 和 95 行删除
package-lock.json
浏览文件 @ 3aa9cdc4
......@@ -12,10 +12,12 @@
"animejs": "^3.2.1",
"axios": "^0.27.2",
"core-js": "^3.8.3",
"echarts": "^5.3.3",
"element-ui": "^2.15.9",
"js-cookie": "^3.0.1",
"mockjs": "^1.1.0",
"node-sass": "^7.0.1",
"postcss-pxtorem": "^5.1.1",
"qrcodejs2": "^0.0.2",
"sass-loader": "^13.0.2",
"svgo": "^2.8.0",
......@@ -32,7 +34,6 @@
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"echarts": "^5.3.3",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
......@@ -40,6 +41,7 @@
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7",
"svg-sprite-loader": "^6.0.11",
"terser-webpack-plugin": "^5.3.3",
"vue-template-compiler": "^2.6.14"
}
},
......@@ -5371,7 +5373,6 @@
"version": "5.3.3",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
"dev": true,
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.3.2"
......@@ -5380,8 +5381,7 @@
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"dev": true
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/ee-first": {
"version": "1.1.1",
......@@ -10838,6 +10838,31 @@
"postcss": ">4 <9"
}
},
"node_modules/postcss-pxtorem": {
"version": "5.1.1",
"resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-5.1.1.tgz",
"integrity": "sha512-uvgIujL/pn0GbZ+rczESD2orHsbXrrCqi+q9wJO8PCk3ZGCoVVtu5hZTbtk+tbZHZP5UkTfCvqOrTZs9Ncqfsg==",
"dependencies": {
"postcss": "^7.0.27"
}
},
"node_modules/postcss-pxtorem/node_modules/picocolors": {
"version": "0.2.1",
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-0.2.1.tgz",
"integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
},
"node_modules/postcss-pxtorem/node_modules/postcss": {
"version": "7.0.39",
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz",
"integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
"dependencies": {
"picocolors": "^0.2.1",
"source-map": "^0.6.1"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/postcss-reduce-initial": {
"version": "5.1.0",
"resolved": "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz",
......@@ -14822,7 +14847,6 @@
"version": "5.3.2",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
"integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
"dev": true,
"dependencies": {
"tslib": "2.3.0"
}
......@@ -14830,8 +14854,7 @@
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"dev": true
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
},
"dependencies": {
......@@ -18963,7 +18986,6 @@
"version": "5.3.3",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
"dev": true,
"requires": {
"tslib": "2.3.0",
"zrender": "5.3.2"
......@@ -18972,8 +18994,7 @@
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"dev": true
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
},
......@@ -23224,6 +23245,30 @@
"dev": true,
"requires": {}
},
"postcss-pxtorem": {
"version": "5.1.1",
"resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-5.1.1.tgz",
"integrity": "sha512-uvgIujL/pn0GbZ+rczESD2orHsbXrrCqi+q9wJO8PCk3ZGCoVVtu5hZTbtk+tbZHZP5UkTfCvqOrTZs9Ncqfsg==",
"requires": {
"postcss": "^7.0.27"
},
"dependencies": {
"picocolors": {
"version": "0.2.1",
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-0.2.1.tgz",
"integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
},
"postcss": {
"version": "7.0.39",
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz",
"integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
"requires": {
"picocolors": "^0.2.1",
"source-map": "^0.6.1"
}
}
}
},
"postcss-reduce-initial": {
"version": "5.1.0",
"resolved": "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz",
......@@ -26451,7 +26496,6 @@
"version": "5.3.2",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
"integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
"dev": true,
"requires": {
"tslib": "2.3.0"
},
......@@ -26459,8 +26503,7 @@
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"dev": true
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
}
package.json
浏览文件 @ 3aa9cdc4
......@@ -13,10 +13,12 @@
"animejs": "^3.2.1",
"axios": "^0.27.2",
"core-js": "^3.8.3",
"echarts": "^5.3.3",
"element-ui": "^2.15.9",
"js-cookie": "^3.0.1",
"mockjs": "^1.1.0",
"node-sass": "^7.0.1",
"postcss-pxtorem": "^5.1.1",
"qrcodejs2": "^0.0.2",
"sass-loader": "^13.0.2",
"svgo": "^2.8.0",
......@@ -33,7 +35,6 @@
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"echarts": "^5.3.3",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
......@@ -41,6 +42,7 @@
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7",
"svg-sprite-loader": "^6.0.11",
"terser-webpack-plugin": "^5.3.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
......
postcss.config.js 0 → 100644
浏览文件 @ 3aa9cdc4
module.exports = {
plugins: {
'postcss-pxtorem': {
//根元素字体大小
rootValue: 16,
//匹配CSS中的属性，* 代表启用所有属性
propList: ['*'],
//转换成rem后保留的小数点位数
unitPrecision: 5,
//小于12px的样式不被替换成rem
minPixelValue: 12,
//忽略一些文件，不进行转换，比如我想忽略 依赖的UI框架
exclude: ['node_modules']
}
}
}
\ No newline at end of file
public/index.html
浏览文件 @ 3aa9cdc4
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- 使用CDN的CSS文件 -->
<!-- <% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %> -->
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 使用CDN的JS文件 -->
<!-- <% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %> -->
</body>
</html>
\ No newline at end of file
src/App.vue
浏览文件 @ 3aa9cdc4
<template>
<div id="app">
<NavBar />
<router-view :key="$route.fullPath" v-if="isRouterAlive" />
<!-- <router-view :key="$route.fullPath" v-if="isRouterAlive" /> -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<Footer />
</div>
</template>
......@@ -12,17 +16,17 @@ export default {
components: { NavBar, Footer },
data() {
return {
isRouterAlive: true,
// isRouterAlive: true,
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(() => (this.isRouterAlive = true));
},
// reload() {
// this.isRouterAlive = false;
// this.$nextTick(() => (this.isRouterAlive = true));
// },
},
};
</script>
<style lang="scss">
@import url("@/assets/styles/index.scss");
</style>
src/assets/styles/index.scss
浏览文件 @ 3aa9cdc4
......@@ -33,4 +33,29 @@ li {
ul,
li {
list-style: none;
}
//一些公共样式
.empty-space {
height: 100px;
background-color: #2069c4;
width: 100%
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
// 浏览量图标样式
.view-container {
.view-svg-icon {
color: #61666d;
margin-right: 5px
}
.view-text {
color: #61666d
}
}
\ No newline at end of file
src/components/DevicePixelRatio/index.js 0 → 100644
浏览文件 @ 3aa9cdc4
/**
* @author trsoliu
* @date 2019-12-05
* @description 校正windows页面在系统进行缩放后导致页面被放大的问题，通常放大比例是125%、150%
* **/
class DevicePixelRatio {
constructor() {
//this.flag = false;
}
//获取系统类型
_getSystem() {
let flag = false;
var agent = navigator.userAgent.toLowerCase();
// var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
// if(isMac) {
// return false;
// }
//现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
if(agent.indexOf("windows") >= 0) {
return true;
}
}
//获取页面缩放比例
// _getDevicePixelRatio() {
// let t = this;
// }
//监听方法兼容写法
_addHandler(element, type, handler) {
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
//校正浏览器缩放比例
_correct() {
let t = this;
//页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
}
//监听页面缩放
_watch() {
let t = this;
t._addHandler(window, 'resize', function() { //注意这个方法是解决全局有两个window.resize
//重新校正
t._correct()
})
}
//初始化页面比例
init() {
let t = this;
if(t._getSystem()) { //判断设备，目前只在windows系统下校正浏览器缩放比例
//初始化页面校正浏览器缩放比例
t._correct();
//开启监听页面缩放
t._watch();
}
}
}
export default DevicePixelRatio;
\ No newline at end of file
src/components/NavBar/index.vue
浏览文件 @ 3aa9cdc4
......@@ -84,6 +84,7 @@
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "NavBar",
......@@ -129,6 +130,7 @@ export default {
},
};
},
methods: {
handleToLogin() {
this.$router.push("/login?redirect=" + this.$route.fullPath);
......@@ -172,6 +174,10 @@ export default {
align-items: center;
justify-content: space-between;
padding: 0 70px 0 100px;
.logo-container{
width: 380px;
height: 74px;
}
.title {
}
.right {
......
src/components/SearchBar/index.vue
浏览文件 @ 3aa9cdc4
......@@ -16,7 +16,7 @@
class="center"
@keyup.enter.native="search"
></el-input>
<el-button style="width: 300px" round type="primary" @click.native="search"
<el-button round type="primary" @click.native="search" class="searchButton"
>检索</el-button
>
</div>
......@@ -66,4 +66,7 @@ export default {
margin: 0 16px;
}
}
.searchButton{
width: 300px;
}
</style>
src/components/Video/index.vue
浏览文件 @ 3aa9cdc4
<template>
<video :src="url" style="height: auto; width: 100%" controls loop></video>
<video :src="url" class="video-wrapper" controls loop></video>
</template>
<script>
export default {
name: 'Video',
name: "Video",
props: {
url: {
default: "",
......@@ -14,5 +14,9 @@ export default {
};
</script>
<style>
<style scoped lang='scss'>
.video-wrapper {
height: auto;
width: 100%;
}
</style>
\ No newline at end of file
src/main.js
浏览文件 @ 3aa9cdc4
......@@ -5,10 +5,16 @@ import store from './store/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/styles/index.scss";//全局样式
// import * as echarts from 'echarts'
import './icons'
import dict from '@/components/Dict'
import VueLazyComponent from '@xunlei/vue-lazy-component'
import '@/rem'
// 全局混入
// import { common } from '@/mixins'
// import '@/permission' // permission control
Vue.config.productionTip = false
......@@ -21,6 +27,12 @@ Vue.use(dict);
// 全局注册组件懒加载方案
Vue.use(VueLazyComponent)
// // 全局混入浏览器缩放适配组件
// Vue.mixin(common)
new Vue({
router,
......
src/mixins/common.js 0 → 100644
浏览文件 @ 3aa9cdc4
/**
* 全局混入
*/
import DevicePixelRatio from '@/components/DevicePixelRatio'; //放大缩小适配
export default {
component: {
DevicePixelRatio
},
created() {
new DevicePixelRatio().init()
},
/**
* 全局方法
*/
methods: {
/**
* 跳转页面(通过name)
* @param name 路由name
* @param data 参数(默认空)
*/
toPage(name, data = {}) {
const query = Object.assign({}, data, {
t: +new Date()
})
this.$router.push({
name: name,
query: query
})
},
/**
* 页面跳转(返回上一页面)
*/
backPage() {
this.$router.back(-1)
},
}
}
src/mixins/index.js 0 → 100644
浏览文件 @ 3aa9cdc4
// 全局公共方法
import common from './common'
export {
common
}
\ No newline at end of file
src/rem.js 0 → 100644
浏览文件 @ 3aa9cdc4
const baseSize = 16
function setRem() {
const scale = document.documentElement.clientWidth / 1920
document.documentElement.style.fontSize = baseSize * scale + 'px'
}
setRem()
window.onresize = function () {
setRem()
}
\ No newline at end of file
src/router/index.js
浏览文件 @ 3aa9cdc4
......@@ -3,80 +3,116 @@ import VueRouter from 'vue-router'
import Home from '../views/home'
Vue.use(VueRouter)
// keepAlive先全部为true 后期根据每个页面需求调整
const routes = [
// 首页
{
path: '/',
name: 'home',
component: Home
component: Home,
meta:{
keepAlive:true
}
},
// 精品展
{
path: '/boutique',
name: 'about',
component: () => import('@/views/boutique')
component: () => import('@/views/boutique'),
meta:{
keepAlive:true
}
},
// 虚拟展厅
{
path: '/virtual',
name: 'virtual',
component: () => import('@/views/virtual')
component: () => import('@/views/virtual'),
meta:{
keepAlive:true
}
},
// 布展
{
path: '/display',
name: 'display',
component: () => import('@/views/display')
component: () => import('@/views/display'),
meta:{
keepAlive:true
}
},
// 布展详情页
{
path: '/display/:exhibitionId',
name: 'displayDetail',
component: () => import('@/views/display/Detail.vue')
component: () => import('@/views/display/Detail.vue'),
meta:{
keepAlive:true
}
},
// 文物展
{
path: '/culturalRelic',
name: 'culturalRelic',
component: () => import('@/views/culturalRelic')
component: () => import('@/views/culturalRelic'),
meta:{
keepAlive:true
}
},
// 文物详情页
{
path: '/culturalRelic/:crId',
name: 'culturalRelicDetail',
component: () => import('@/views/culturalRelic/Detail.vue')
component: () => import('@/views/culturalRelic/Detail.vue'),
meta:{
keepAlive:true
}
},
// 个人中心
{
path: '/personal',
name: 'personal',
component: () => import('@/views/personal')
component: () => import('@/views/personal'),
meta:{
keepAlive:true
}
},
// 登录
{
path: '/login',
name: 'login',
component: () => import('@/views/login')
component: () => import('@/views/login'),
meta:{
keepAlive:true
}
},
// 注册页
{
path: '/register',
name: 'register',
component: () => import('@/views/register')
component: () => import('@/views/register'),
meta:{
keepAlive:true
}
},
// 博物馆
{
path: '/museum',
name: 'museum',
component: () => import('@/views/museum')
component: () => import('@/views/museum'),
meta:{
keepAlive:true
}
},
// 博物馆详情
{
path: '/museum/:id',
name: 'museum',
component: () => import('@/views/museum/Detail.vue')
component: () => import('@/views/museum/Detail.vue'),
meta:{
keepAlive:true
}
},
]
......
src/views/culturalRelic/Detail.vue
浏览文件 @ 3aa9cdc4
......@@ -8,7 +8,7 @@
:keyword="keyword"
/>
</div> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="empty-space"></div>
<div class="wrapper">
<div class="back">
<el-button
......@@ -30,7 +30,7 @@
:key="index"
>
<el-image
style="width: 100%; height: 100%"
class="el-image-container"
:src="item.url"
fit="contain"
></el-image>
......@@ -43,21 +43,17 @@
<el-col class="relic-info" :span="8">
<div class="info-title">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
class="flex-center"
>
<h3>
{{ CRDetail.name }}
</h3>
<span>
<span class="view-container">
<svg-icon
icon-class="view"
style="color: #61666d; margin-right: 5px"
class="view-svg-icon"
></svg-icon>
<span style="color: #61666d">{{ CRDetail.browseCount }}</span>
<span class="view-text">{{ CRDetail.browseCount }}</span>
</span>
</div>
......@@ -519,4 +515,8 @@ $label: #9f9c9a;
.margin-bottom-32 {
margin-bottom: 32px;
}
.el-image-container {
width: 100%;
height: 100%;
}
</style>
src/views/culturalRelic/index.vue
浏览文件 @ 3aa9cdc4
......@@ -41,7 +41,6 @@
@error="defImg"
class="cr-img"
lazy
style="height:280px"
/>
<img
v-else
......@@ -263,6 +262,7 @@ $text-indent: 16px;
position: relative;
.cr-img {
width: 100%;
height: 280px;
}
.showIcon {
position: absolute;
......
src/views/display/Detail.vue
浏览文件 @ 3aa9cdc4
......@@ -8,7 +8,7 @@
:keyword="keyword"
/>
</div> -->
<div style="height:100px;background-color:#2069c4;width: 100%;"></div>
<div class="empty-space"></div>
<div class="wrapper">
<div class="back">
<el-button
......@@ -52,14 +52,9 @@
<h4>
{{ displayDetail.title }}
</h4>
<span>
<svg-icon
icon-class="view"
style="color: #61666d; margin-right: 5px"
></svg-icon>
<span style="color: #61666d">{{
displayDetail.browseCount
}}</span>
<span class="view-container">
<svg-icon icon-class="view" class="view-svg-icon"></svg-icon>
<span class="view-text">{{ displayDetail.browseCount }}</span>
</span>
</div>
......
src/views/display/index.vue
浏览文件 @ 3aa9cdc4
<template>
<div class="display">
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="empty-space"></div>
<!-- <NavBar /> -->
<div class="main">
<div class="content">
......
src/views/home/components/Boutique.vue
浏览文件 @ 3aa9cdc4
<template>
<el-carousel height="100vh" style="width: 100%">
<el-carousel class="slider">
<el-carousel-item>
<div>
<img src="@/assets/imgs/boutique/1.jpg" width="100%" />
......@@ -34,7 +34,12 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .el-carousel__container{
::v-deep .el-carousel__container {
width: 100%;
height: 100%;
}
.slider {
height: 100vh;
width: 100%;
}
</style>>
\ No newline at end of file
src/views/home/components/Display.vue
浏览文件 @ 3aa9cdc4
......@@ -79,10 +79,6 @@ export default {
this.currentItem = this.list[0];
},
handleChangePage(page) {
debugger;
// this.currentPage = page;
// debugger
// this.currentItem = null;
this.currentItem = page;
},
},
......
src/views/home/components/MuseumMap.vue
浏览文件 @ 3aa9cdc4
......@@ -15,7 +15,7 @@
@click="handleClick(curMuseum)"
v-show="curMuseum.name"
>
<span style="margin-right: 12px">点击进入</span>
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance-black.png" alt="" />
</div>
</div>
......@@ -26,7 +26,7 @@
<script>
import * as echarts from "echarts";
import guizhou from "@/utils/common-data/guizhou.json";
import guizhou from "../../../../public/geoData/guizhou.json";
import { getMuseumListPage } from "@/api/org";
export default {
name: "MuseumMap",
......@@ -178,7 +178,7 @@ export default {
areaColor: "#12235c",
},
emphasis: {
areaColor: "#2AB8FF",
areaColor: "#2069c4",
borderWidth: 0,
color: "green",
},
......@@ -314,6 +314,9 @@ export default {
cursor: pointer;
display: flex;
align-content: flex-end;
.entrance-text{
margin-right: 12px;
}
img {
transform: rotateX(180deg);
}
......@@ -322,7 +325,7 @@ export default {
.map {
width: 900px;
height: 820px;
height: calc(100vh * 2 / 3);
}
}
}
......
src/views/home/components/Virtural.vue
浏览文件 @ 3aa9cdc4
......@@ -19,7 +19,7 @@
{{ list[0].intro }}
</div>
<div class="entrance" @click="handleClick(list[0])">
<span style="margin-right: 12px">点击进入</span>
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance.png" alt="" />
</div>
</div>
......@@ -117,6 +117,9 @@ export default {
.entrance {
font-size: 16px;
cursor: pointer;
.entrance-text{
margin-right: 12px;
}
}
}
.virtual-items {
......
src/views/login/index.vue
浏览文件 @ 3aa9cdc4
<!-- -->
<template>
<div class="wrapper">
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="empty-space"></div>
<div class="login">
<div class="title">
<div class="text">登录</div>
......
vue.config.js
浏览文件 @ 3aa9cdc4
......@@ -6,6 +6,35 @@ const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
// //生产环境标记
// const IS_PRODUCTION = process.env.NODE_ENV === 'production'
// //配置引用cdn的js、css地址
// const cdn = {
// css: [
// 'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css'
// ],
// js: [
// 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
// 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.2/vue-router.min.js',
// 'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js',
// 'https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js',
// 'https://unpkg.com/element-ui@2.13.2/lib/index.js',
// 'https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js'
// ]
// }
// //配置打包时使用CDN节点（加入externals外部扩展）， 忽略打包的第三方库
// //左面放package.json中的扩展的名称,右面放项目依赖的名称(项目初始化要用的名称)
// const externals = {
// // 属性名称 vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的，不去 node_modules 中找，而是去找全局变量 Vue（其他的为VueRouter、Vuex、axios、ELEMENT、echarts，注意全局变量是一个确定的值，不能修改为其他值，修改为其他大小写或者其他值会报错，若有异议可留言）
// vue: 'Vue',
// 'vue-router': 'VueRouter',
// vuex: 'Vuex',
// axios: 'axios',
// 'element-ui': 'ELEMENT',
// 'echarts': 'echarts'
// }
module.exports = defineConfig({
publicPath: './',
outputDir: 'dist',
......@@ -28,6 +57,57 @@ module.exports = defineConfig({
}
}
},
// configureWebpack: {
// // 采用cdn的方式,所以将以下这些文件配置不打包
// externals: {
// vue: "vue",
// 'vue-router': 'VueRouter',
// vuex: 'Vuex',
// axios: 'axios',
// 'core-js': 'core-js',
// },
// resolve: {
// alias: {
// '@': resolve('src')
// }
// },
// optimization: {
// splitChunks: {
// cacheGroups: {
// vendor: {
// //第三方库抽离
// chunks: "all",
// test: /node_modules/,
// name: "vendor",
// minChunks: 1, //在分割之前，这个代码块最小应该被引用的次数
// maxInitialRequests: 5,
// minSize: 0, //大于0个字节
// priority: 100 //权重
// },
// common: {
// //公用模块抽离
// chunks: "all",
// test: /[\\/]src[\\/]utils[\\/]/,
// name: "common",
// minChunks: 1,
// maxInitialRequests: 5,
// minSize: 0, //大于0个字节
// priority: 60
// },
// // styles: {
// // //样式抽离
// // name: "styles",
// // test: /\.(sa|sc|c)ss$/,
// // chunks: "all",
// // enforce: true
// // },
// runtimeChunk: {
// name: "manifest"
// }
// }
// }
// }
// },
chainWebpack: config => {
config
.plugin('html')
......@@ -35,6 +115,8 @@ module.exports = defineConfig({
args[0].title = '贵州省精品展览展示平台'
return args
})
// svg
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
......@@ -50,15 +132,28 @@ module.exports = defineConfig({
symbolId: 'icon-[name]'
})
.end()
// cdn
// if (IS_PRODUCTION) {
// config.plugin('html').tap(args => {
// args[0].cdn = cdn
// return args
// })
// //视为一个外部库，而不将它打包进来
// config.externals(externals)
// // 生产模式去除console.log
// config.optimization
// .minimizer('terser')
// .tap(args => {
// Object.assign(args[0].terserOptions.compress, {
// pure_funcs: ['console.log']
// })
// return args
// })
// }
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
resolve: {
alias: {
'@': resolve('src')
}
}
},
})
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论