@@ -41,6 +41,7 @@ | |||
"screenfull": "5.0.2", | |||
"sortablejs": "1.10.2", | |||
"splitpanes": "2.4.1", | |||
"vant": "^2.13.9", | |||
"vue": "2.6.12", | |||
"vue-count-to": "1.0.13", | |||
"vue-cropper": "0.5.5", | |||
@@ -0,0 +1,19 @@ | |||
import request from '@/utils/request' | |||
// 查询首页菜单 | |||
export function getMenuApp(query) { | |||
return request({ | |||
url: '/system/menuapp/menus', | |||
method: 'get', | |||
params: query | |||
}) | |||
} | |||
// 新增公告 | |||
export function addNotice(data) { | |||
return request({ | |||
url: '/system/notice', | |||
method: 'post', | |||
data: data | |||
}) | |||
} |
@@ -35,6 +35,9 @@ import ImagePreview from "@/components/ImagePreview" | |||
import DictTag from '@/components/DictTag' | |||
// 字典数据组件 | |||
import DictData from '@/components/DictData' | |||
// Vant 引用 | |||
import Vant from 'vant'; | |||
import 'vant/lib/index.css'; | |||
// 全局方法挂载 | |||
Vue.prototype.getDicts = getDicts | |||
@@ -57,6 +60,7 @@ Vue.component('FileUpload', FileUpload) | |||
Vue.component('ImageUpload', ImageUpload) | |||
Vue.component('ImagePreview', ImagePreview) | |||
Vue.use(Vant) | |||
Vue.use(directive) | |||
Vue.use(plugins) | |||
DictData.install() | |||
@@ -9,7 +9,7 @@ import { isRelogin } from '@/utils/request' | |||
NProgress.configure({ showSpinner: false }) | |||
const whiteList = ['/login', '/register'] | |||
const whiteList = ['/login', '/register', '/app/login', '/app/list'] | |||
const isWhiteList = (path) => { | |||
return whiteList.some(pattern => isPathMatch(pattern, path)) | |||
@@ -55,11 +55,16 @@ router.beforeEach((to, from, next) => { | |||
} | |||
} else { | |||
// 没有token | |||
console.log(to.fullPath) | |||
if (isWhiteList(to.path)) { | |||
// 在免登录白名单,直接进入 | |||
next() | |||
} else { | |||
next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页 | |||
if (to.path.indexOf('/app/') > -1){ | |||
next(`/app/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页 | |||
}else{ | |||
next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页 | |||
} | |||
NProgress.done() | |||
} | |||
} | |||
@@ -87,7 +87,43 @@ export const constantRoutes = [ | |||
meta: { title: '个人中心', icon: 'user' } | |||
} | |||
] | |||
} | |||
}, | |||
{ //登录页 | |||
path: '/app/login', | |||
name: 'appLogin', | |||
meta: { | |||
title: '登录', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/app/login'], resolve) | |||
}, | |||
{ //首页 | |||
path: '/app/index', | |||
name: 'appIndex', | |||
meta: { | |||
title: '首页', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/app/index'], resolve) | |||
}, | |||
{ //用户页 | |||
path: '/app/user', | |||
name: 'appUser', | |||
meta: { | |||
title: '首页', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/app/user'], resolve) | |||
}, | |||
{ //用户页 | |||
path: '/app/list', | |||
name: 'appList', | |||
meta: { | |||
title: '列表', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/app/list'], resolve) | |||
}, | |||
] | |||
// 动态路由,基于用户权限动态去加载 | |||
@@ -81,13 +81,18 @@ service.interceptors.response.use(res => { | |||
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') { | |||
return res.data | |||
} | |||
console.log(location) | |||
if (code === 401) { | |||
if (!isRelogin.show) { | |||
isRelogin.show = true | |||
MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { | |||
isRelogin.show = false | |||
store.dispatch('LogOut').then(() => { | |||
location.href = '/index' | |||
if (location.pathname.indexOf('/app/') > -1){ | |||
location.href = '/app/index' | |||
}else{ | |||
location.href = '/index' | |||
} | |||
}) | |||
}).catch(() => { | |||
isRelogin.show = false | |||
@@ -0,0 +1,167 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<div class="header"> | |||
<div class="left"> | |||
<div class="avatar"><img src="../../assets/images/app/user_header.png" alt=""></div> | |||
<div class="info"> | |||
<p>张晋升</p> | |||
<p>常家围子村委会</p> | |||
</div> | |||
</div> | |||
<van-icon name="setting" size="25" @click="$router.push({ path: '/app/user' })" /> | |||
</div> | |||
<img src="../../assets/images/app/banner.png" width="100%" style="margin: 2vh 0;" alt=""> | |||
<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" color="#000000" > | |||
<p slot="left-icon" class="notice_tt">通知</p> | |||
</van-notice-bar> | |||
<div class="content"> | |||
<p class="title">服务功能</p> | |||
<div class="flex-main"> | |||
<div> | |||
<img src="../../assets/images/app/user_header.png" alt=""> | |||
<p>地图管理</p> | |||
</div> | |||
<div> | |||
<img src="../../assets/images/app/user_header.png" alt=""> | |||
<p>地图管理</p> | |||
</div> | |||
<div> | |||
<img src="../../assets/images/app/user_header.png" alt=""> | |||
<p>地图管理</p> | |||
</div> | |||
<div> | |||
<img src="../../assets/images/app/user_header.png" alt=""> | |||
<p>地图管理</p> | |||
</div> | |||
<div> | |||
<img src="../../assets/images/app/user_header.png" alt=""> | |||
<p>地图管理</p> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { getMenuApp } from "@/api/app/index"; | |||
import Cookies from "js-cookie"; | |||
export default { | |||
name: "appIndex", | |||
data() { | |||
return { | |||
}; | |||
}, | |||
created() { | |||
this.getMenuApp(); | |||
}, | |||
methods: { | |||
getMenuApp(){ | |||
getMenuApp().then((res) => { | |||
}); | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
p{margin: 0;} | |||
.home_wrapper{ | |||
width: 100vw; | |||
min-height: 100vh; | |||
background: #F6F9FB url('../../assets/images/app/index_bg.png') no-repeat center top; | |||
background-size: 100% auto; | |||
padding: 5vh 4vw 0; | |||
} | |||
.header{ | |||
display: flex; | |||
align-items: self-start; | |||
justify-content: space-between; | |||
.left{ | |||
display: flex; | |||
} | |||
.avatar{ | |||
width: 18vw; | |||
height: 18vw; | |||
overflow: hidden; | |||
img{ | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.info{ | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-evenly; | |||
margin-left: 15px; | |||
p{ | |||
&:nth-child(1){ | |||
font-weight: bold; | |||
font-size: 2vh; | |||
} | |||
&:nth-child(2){ | |||
font-size: 1.65vh; | |||
color: #666666; | |||
} | |||
} | |||
} | |||
i{ | |||
margin-top: 1vh; | |||
} | |||
} | |||
.van-notice-bar{ | |||
background: #ffffff url("../../assets/images/app/note_bg.png") no-repeat center; | |||
border-radius: 5px; | |||
} | |||
.notice_tt{ | |||
font-size: 2vh; | |||
font-weight: bold; | |||
background: -webkit-linear-gradient(#53E4A5, #24DBDB); | |||
-webkit-background-clip: text; | |||
color: transparent; | |||
} | |||
.content{ | |||
background: linear-gradient( 186deg, #DFFFF1 0%, #FFFFFF 100%); | |||
border-radius: 12px 12px 12px 12px; | |||
padding: 4vw; | |||
margin-top: 2vh; | |||
border: 2px solid #FFFFFF; | |||
.title{ | |||
background: url("../../assets/images/app/title_bg.png") no-repeat left 10px; | |||
font-size: 2.2vh; | |||
font-weight: bold; | |||
padding-bottom: 10px; | |||
color: #0D131A; | |||
font-family: Source Han Sans CN, Source Han Sans CN; | |||
} | |||
.flex-main{ | |||
display: flex; | |||
justify-content: space-between; | |||
flex-wrap: wrap; | |||
div{ | |||
width: 22%; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
margin-top: 15px; | |||
img{ | |||
width: 80%; | |||
} | |||
p{ | |||
color: #111311; | |||
margin-top: 5px; | |||
font-size: 1.6vh; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,219 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<van-nav-bar | |||
title="土地列表管理" | |||
left-arrow | |||
placeholder | |||
safe-area-inset-top | |||
@click-left="onClickLeft" | |||
/> | |||
<div class="search_box"> | |||
<div class="left"> | |||
<p>已清查<van-icon name="play" /></p> | |||
<van-field v-model="value" left-icon="smile-o" placeholder="请输入用户名" /> | |||
</div> | |||
<van-button type="primary" round >搜索</van-button> | |||
</div> | |||
<div class="list_main"> | |||
<van-list | |||
v-model="loading" | |||
:finished="finished" | |||
finished-text="没有更多了" | |||
@load="getList" | |||
> | |||
<!--1--> | |||
<van-swipe-cell right-width="200" class="item" v-for="(item,index) in 10" :key="index"> | |||
<div class="item_box" @click="$router.push({name:'',query:{id:item.id}})"> | |||
<div class="head_block"> | |||
<div class="title">334656556565</div> | |||
<div class="describe">已清查</div> | |||
</div> | |||
<div class="order_block"> | |||
<div class="order">名称名称名称名称名称名</div> | |||
<div class="describe">67.08</div> | |||
</div> | |||
</div> | |||
<template #right> | |||
<div style="background-color: #29D2AF;height: 100%">属性<br/>修改</div> | |||
<div style="background-color: #0E82EB;height: 100%">经营<br/>修改</div> | |||
<div style="background-color: #ee0a24;height: 100%">删除</div> | |||
</template> | |||
</van-swipe-cell> | |||
</van-list> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
// import { getMenuApp } from "@/api/app/index"; | |||
import Cookies from "js-cookie"; | |||
export default { | |||
name: "appList", | |||
data() { | |||
return { | |||
loading: false, | |||
finished: false, | |||
}; | |||
}, | |||
created() { | |||
}, | |||
methods: { | |||
getList(){ | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
p{margin: 0;} | |||
.home_wrapper{ | |||
width: 100vw; | |||
min-height: 100vh; | |||
background: #F6F9FB; | |||
} | |||
.van-nav-bar{ | |||
background: linear-gradient( 173deg, #91E2D3 0%, #CDFCF0 100%); | |||
::v-deep.van-icon{ | |||
color: #000000; | |||
} | |||
} | |||
.list_main{ | |||
padding:0 3vw; | |||
.item{ | |||
border-radius: 10px; | |||
background: #fff; | |||
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); | |||
margin-bottom: 20px; | |||
.item_box{ | |||
padding:15px; | |||
} | |||
.head_block{ | |||
display: flex; | |||
align-items: center; | |||
width: 100%; | |||
.title{ | |||
flex:1; | |||
font-size: 16px; | |||
color: #252525; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
padding-right: 20px; | |||
} | |||
.describe{ | |||
font-size: 14px; | |||
color: #29D2AF; | |||
} | |||
} | |||
.order_block{ | |||
display: flex; | |||
align-items: center; | |||
width: 100%; | |||
margin-top: 10px; | |||
.order{ | |||
flex: 1; | |||
font-size: 16px; | |||
color: #666666; | |||
} | |||
.describe{ | |||
font-size: 22px; | |||
color: #29D2AF; | |||
} | |||
} | |||
.function_block{ | |||
height: 46px; | |||
display: flex; | |||
align-items: center; | |||
.time{ | |||
display: flex; | |||
flex: 1; | |||
align-items: center; | |||
font-size: 24px; | |||
color: #858585; | |||
.icon{ | |||
width: 25px; | |||
height: 25px; | |||
display: block; | |||
margin-right: 8px; | |||
} | |||
} | |||
.state{ | |||
/*flex: 1;*/ | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
&.sell{ | |||
color: #f69600; | |||
} | |||
&.scrap{ | |||
color: #858585; | |||
} | |||
&.normal{ | |||
color: #68c000; | |||
} | |||
} | |||
.value{ | |||
flex:1; | |||
display: flex; | |||
align-items: center; | |||
justify-content:flex-end; | |||
font-size: 24px; | |||
color: #858585; | |||
.amount{ | |||
color: #eb1616; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
::v-deep .van-swipe-cell__right{ | |||
display: flex; | |||
align-items: center; | |||
width: 200PX; | |||
margin-left: 5PX; | |||
a,div{ | |||
margin: 0; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
color: #ffffff; | |||
font-size: 14PX; | |||
height: 100%; | |||
flex: 1; | |||
} | |||
} | |||
.search_box{ | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
width: 94%; | |||
margin: 2vh auto; | |||
.left{ | |||
display: flex; | |||
align-items: center; | |||
flex: 1; | |||
background-color: #ffffff; | |||
border-radius: 50vh; | |||
padding-left: 6%; | |||
overflow: hidden; | |||
margin-right: 3vw; | |||
} | |||
p{ | |||
flex-shrink: 0; | |||
} | |||
button{ | |||
flex-shrink: 0; | |||
background: linear-gradient( 271deg, #53E4A5 0%, #24DBDB 100%); | |||
border: none; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,243 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<div class="focus_head"> | |||
<div class="title"> | |||
<p>Hello</p> | |||
<p>欢迎登录资源清查</p> | |||
</div> | |||
</div> | |||
<div style="position:relative;"> | |||
<van-form @submit="handleLogin"> | |||
<div class="login_from"> | |||
<van-field | |||
v-model="formData.username" | |||
placeholder="请输入手机号/账号" | |||
left-icon="contact-o" | |||
:rules="[{ required: true, message:'' }]" | |||
/> | |||
<van-field | |||
v-model="formData.password" | |||
type="password" | |||
left-icon="edit" | |||
style="margin-top: 20px" | |||
placeholder="请输入密码" | |||
:rules="[{ required: true, message:'' }]" | |||
/> | |||
<div style="display: flex;width: 90%;margin: 20px auto 0;"> | |||
<van-field | |||
v-model="formData.code" | |||
left-icon="shield-o" | |||
center | |||
clearable | |||
placeholder="图形验证码" | |||
/> | |||
<div style="border-radius: 100vh;width: 120px;margin-left: 20px;overflow: hidden;flex-shrink: 0;"> | |||
<img style="width: 120px;display: block;transform: scale(1.1);" :src="codeUrl" @click="getCode" /> | |||
</div> | |||
</div> | |||
<div style="display: flex;width: 90%;margin: 20px auto 0;"> | |||
<van-checkbox v-model="formData.rememberMe" shape="square">记住密码</van-checkbox> | |||
</div> | |||
</div> | |||
<div style="margin: 0px 16px 16px;border-radius: 100vh;overflow: hidden;"> | |||
<van-button | |||
class="btn" | |||
color="linear-gradient(to right, #53E4A5, #24DBDB)" | |||
round | |||
block | |||
type="info" | |||
native-type="submit" | |||
:loading="loading" | |||
>登录</van-button> | |||
</div> | |||
</van-form> | |||
</div> | |||
<p class="copy">中农融信北京科技股份有限公司</p> | |||
</div> | |||
</template> | |||
<script> | |||
import { getCodeImg, getSmsCode } from "@/api/login"; | |||
import Cookies from "js-cookie"; | |||
import { encrypt, decrypt } from "../../utils/jsencrypt"; | |||
//引用wx sdk | |||
// import wx from "weixin-js-sdk"; | |||
export default { | |||
name: "appLogin", | |||
data() { | |||
return { | |||
formData: { | |||
username: "", //账号 | |||
password: "", //密码 | |||
// username:'', | |||
// password:'', | |||
code: null, //图片验证码 | |||
uuid: null, //识别uuid | |||
mobile: null, //手机号 | |||
smsCode: null, //短信验证码 | |||
rememberMe:false | |||
}, | |||
loading: false, | |||
codeUrl: "", //验证码 | |||
isSmsLogin: false, //是否手机验证码 | |||
computeTime: 0, | |||
height:0, | |||
show:true | |||
}; | |||
}, | |||
created() { | |||
this.getCode(); | |||
this.height = document.body.clientHeight | |||
this.getCookie(); | |||
//调用微信公众号方法 | |||
// wx.config({ | |||
// debug: true, // 开启调试模式, | |||
// appId: res.appId, // 必填,企业号的唯一标识,此处填写企业号corpid | |||
// timestamp: res.timestamp, // 必填,生成签名的时间戳 | |||
// nonceStr: res.nonceStr, // 必填,生成签名的随机串 | |||
// signature: res.signature,// 必填,签名,见附录1 | |||
// jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 | |||
// }); | |||
//分享要用encodeURIComponent()方法 | |||
}, | |||
methods: { | |||
showPassword(){ | |||
this.show = !this.show; | |||
}, | |||
getCode() { | |||
getCodeImg().then((res) => { | |||
this.formData.uuid = res.uuid; | |||
this.codeUrl = "data:image/gif;base64," + res.img; | |||
}); | |||
}, | |||
getCookie() { | |||
const username = Cookies.get("username"); | |||
const password = Cookies.get("password"); | |||
const rememberMe = Cookies.get("rememberMe"); | |||
this.formData = { | |||
username: username === undefined ? this.formData.username : username, | |||
password: | |||
password === undefined ? this.formData.password : decrypt(password), | |||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), | |||
}; | |||
}, | |||
getSmsCode() { | |||
if (!this.computeTime) { | |||
let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; | |||
if (!myreg.test(this.formData.mobile)) { | |||
this.$dialog.alert({ | |||
message: '手机号格式不正确', | |||
}); | |||
return false; | |||
} | |||
getSmsCode(this.formData.mobile).then((res) => { | |||
if (res.code === 200) { | |||
this.$dialog.alert({ | |||
message: '验证码已发送', | |||
}); | |||
this.loginForm.uuid = res.uuid; | |||
this.computeTime = 60; | |||
this.timer = setInterval(() => { | |||
this.computeTime--; | |||
if (this.computeTime <= 0) { | |||
clearInterval(this.timer); | |||
} | |||
}, 1000); | |||
} | |||
}); | |||
} | |||
}, | |||
handleLogin(values) { | |||
if (this.formData.rememberMe) { | |||
Cookies.set("username", this.formData.username, { expires: 30 }); | |||
Cookies.set("password", encrypt(this.formData.password), { expires: 30 }); | |||
Cookies.set("rememberMe", this.formData.rememberMe, { expires: 30 }); | |||
} else { | |||
Cookies.remove("username"); | |||
Cookies.remove("password"); | |||
Cookies.remove("rememberMe"); | |||
} | |||
//账号密码登录 | |||
if (this.formData.username == "") { | |||
this.$dialog.alert({ | |||
message: '账号不能为空', | |||
}); | |||
return false; | |||
} else if (this.formData.password == "") { | |||
this.$dialog.alert({ | |||
message: '密码不能为空', | |||
}); | |||
return false; | |||
} else if (!this.formData.code) { | |||
this.$dialog.alert({ | |||
message: '图片验证码不能为空', | |||
}); | |||
return false; | |||
} | |||
this.$store | |||
.dispatch("Login", this.formData) | |||
.then(() => { | |||
this.$router.push({ name: 'appIndex' || "/" }).catch(() => {}); | |||
}) | |||
.catch(() => { | |||
this.loading = false; | |||
this.getCode(); | |||
}); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
::v-deep .van-checkbox__label{ | |||
color: #24DBDB; | |||
} | |||
.home_wrapper{ | |||
width: 100vw; | |||
min-height: 100vh; | |||
background: #ffffff url('../../assets/images/app/login_bg.png') no-repeat center top; | |||
background-size: 100% auto; | |||
.focus_head{ | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding: 8vh 0 0 3vw; | |||
.title{ | |||
color: #06101C; | |||
font-size: 4.5vh; | |||
p{ | |||
margin-bottom: 1vh; | |||
} | |||
p:nth-child(1){ | |||
font-weight: bold; | |||
} | |||
p:nth-child(2){ | |||
font-size: 3vh; | |||
} | |||
} | |||
} | |||
.login_from{ | |||
width: 94%; | |||
background: #ffffff; | |||
background-size: 100% 100%; | |||
margin: 30PX auto 0; | |||
padding:20px 0px 50px; | |||
border-radius: 20PX 20PX 0 0; | |||
::v-deep.van-cell{ | |||
background: #eaeef6; | |||
border-radius: 100vh; | |||
width: 90%; | |||
margin: 0 auto; | |||
} | |||
} | |||
.copy{ | |||
text-align: center; | |||
color: #999999; | |||
margin-top: 20vh; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,141 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<van-icon name="arrow-left" size="30" @click="goBack" /> | |||
<div class="header"> | |||
<div class="left"> | |||
<div class="avatar"><img src="../../assets/images/app/user_header.png" alt=""></div> | |||
<div class="info"> | |||
<p>张晋升</p> | |||
<p>常家围子村委会</p> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="content"> | |||
<van-cell title="用户信息" is-link center :border="false"> | |||
<template slot="icon"> | |||
<img src="../../assets/images/app/user_icon_01.png" width="25" alt=""> | |||
</template> | |||
</van-cell> | |||
<van-cell title="修改密码" is-link center :border="false"> | |||
<template slot="icon"> | |||
<img src="../../assets/images/app/user_icon_02.png" width="25" alt=""> | |||
</template> | |||
</van-cell> | |||
<van-cell title="退出登录" is-link center :border="false"> | |||
<template slot="icon"> | |||
<img src="../../assets/images/app/user_icon_03.png" width="25" alt=""> | |||
</template> | |||
</van-cell> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Cookies from "js-cookie"; | |||
export default { | |||
name: "appUser", | |||
data() { | |||
return { | |||
}; | |||
}, | |||
created() { | |||
}, | |||
methods: { | |||
goBack(){ | |||
history.go(-1) | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
p{margin: 0;} | |||
.home_wrapper{ | |||
width: 100vw; | |||
min-height: 100vh; | |||
background: #F6F9FB url('../../assets/images/app/user_bg.png') no-repeat center top; | |||
background-size: 100% auto; | |||
padding: 5vh 4vw 0; | |||
} | |||
.header{ | |||
display: flex; | |||
align-items: self-start; | |||
justify-content: space-between; | |||
margin-top: 3vh; | |||
.left{ | |||
display: flex; | |||
} | |||
.avatar{ | |||
width: 18vw; | |||
height: 18vw; | |||
overflow: hidden; | |||
img{ | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.info{ | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-evenly; | |||
margin-left: 15px; | |||
p{ | |||
&:nth-child(1){ | |||
font-weight: bold; | |||
font-size: 2vh; | |||
} | |||
&:nth-child(2){ | |||
font-size: 1.65vh; | |||
color: #666666; | |||
} | |||
} | |||
} | |||
i{ | |||
margin-top: 1vh; | |||
} | |||
} | |||
.content{ | |||
background: #ffffff; | |||
border-radius: 12px 12px 12px 12px; | |||
padding: 4vw 0; | |||
margin-top: 4vh; | |||
border: 2px solid #FFFFFF; | |||
overflow: hidden; | |||
.title{ | |||
background: url("../../assets/images/app/title_bg.png") no-repeat left 10px; | |||
font-size: 2.2vh; | |||
font-weight: bold; | |||
padding-bottom: 10px; | |||
color: #0D131A; | |||
font-family: Source Han Sans CN, Source Han Sans CN; | |||
} | |||
.flex-main{ | |||
display: flex; | |||
justify-content: space-between; | |||
flex-wrap: wrap; | |||
div{ | |||
width: 22%; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
margin-top: 15px; | |||
img{ | |||
width: 80%; | |||
} | |||
p{ | |||
color: #111311; | |||
margin-top: 5px; | |||
font-size: 1.6vh; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -9,8 +9,8 @@ const CompressionPlugin = require('compression-webpack-plugin') | |||
const name = process.env.VUE_APP_TITLE | |||
const baseUrl = 'http://localhost:8080' // 后端接口 | |||
//const baseUrl = 'http://192.168.0.108:8080' // 后端接口 zzl | |||
//const baseUrl = 'http://localhost:8080' // 后端接口 | |||
const baseUrl = 'http://192.168.0.108:8080' // 后端接口 zzl | |||
const port = process.env.port || process.env.npm_config_port || 80 // 端口 | |||