| @@ -42,6 +42,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 // 端口 | |||