@@ -42,6 +42,7 @@ | |||||
"screenfull": "5.0.2", | "screenfull": "5.0.2", | ||||
"sortablejs": "1.10.2", | "sortablejs": "1.10.2", | ||||
"splitpanes": "2.4.1", | "splitpanes": "2.4.1", | ||||
"vant": "^2.13.9", | |||||
"vue": "2.6.12", | "vue": "2.6.12", | ||||
"vue-count-to": "1.0.13", | "vue-count-to": "1.0.13", | ||||
"vue-cropper": "0.5.5", | "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 DictTag from '@/components/DictTag' | ||||
// 字典数据组件 | // 字典数据组件 | ||||
import DictData from '@/components/DictData' | import DictData from '@/components/DictData' | ||||
// Vant 引用 | |||||
import Vant from 'vant'; | |||||
import 'vant/lib/index.css'; | |||||
// 全局方法挂载 | // 全局方法挂载 | ||||
Vue.prototype.getDicts = getDicts | Vue.prototype.getDicts = getDicts | ||||
@@ -57,6 +60,7 @@ Vue.component('FileUpload', FileUpload) | |||||
Vue.component('ImageUpload', ImageUpload) | Vue.component('ImageUpload', ImageUpload) | ||||
Vue.component('ImagePreview', ImagePreview) | Vue.component('ImagePreview', ImagePreview) | ||||
Vue.use(Vant) | |||||
Vue.use(directive) | Vue.use(directive) | ||||
Vue.use(plugins) | Vue.use(plugins) | ||||
DictData.install() | DictData.install() | ||||
@@ -9,7 +9,7 @@ import { isRelogin } from '@/utils/request' | |||||
NProgress.configure({ showSpinner: false }) | NProgress.configure({ showSpinner: false }) | ||||
const whiteList = ['/login', '/register'] | |||||
const whiteList = ['/login', '/register', '/app/login', '/app/list'] | |||||
const isWhiteList = (path) => { | const isWhiteList = (path) => { | ||||
return whiteList.some(pattern => isPathMatch(pattern, path)) | return whiteList.some(pattern => isPathMatch(pattern, path)) | ||||
@@ -55,11 +55,16 @@ router.beforeEach((to, from, next) => { | |||||
} | } | ||||
} else { | } else { | ||||
// 没有token | // 没有token | ||||
console.log(to.fullPath) | |||||
if (isWhiteList(to.path)) { | if (isWhiteList(to.path)) { | ||||
// 在免登录白名单,直接进入 | // 在免登录白名单,直接进入 | ||||
next() | next() | ||||
} else { | } 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() | NProgress.done() | ||||
} | } | ||||
} | } | ||||
@@ -87,7 +87,43 @@ export const constantRoutes = [ | |||||
meta: { title: '个人中心', icon: 'user' } | 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') { | if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') { | ||||
return res.data | return res.data | ||||
} | } | ||||
console.log(location) | |||||
if (code === 401) { | if (code === 401) { | ||||
if (!isRelogin.show) { | if (!isRelogin.show) { | ||||
isRelogin.show = true | isRelogin.show = true | ||||
MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { | MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { | ||||
isRelogin.show = false | isRelogin.show = false | ||||
store.dispatch('LogOut').then(() => { | store.dispatch('LogOut').then(() => { | ||||
location.href = '/index' | |||||
if (location.pathname.indexOf('/app/') > -1){ | |||||
location.href = '/app/index' | |||||
}else{ | |||||
location.href = '/index' | |||||
} | |||||
}) | }) | ||||
}).catch(() => { | }).catch(() => { | ||||
isRelogin.show = false | 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 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 // 端口 | const port = process.env.port || process.env.npm_config_port || 80 // 端口 | ||||