@@ -77,6 +77,24 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
}, | }, | ||||
}, | }, | ||||
], | ], | ||||
},// 修改密码 | |||||
{ | |||||
path: "/", | |||||
component: Layout, | |||||
redirect: "/myPassword", | |||||
children: [ | |||||
{ | |||||
path: "myPassword", | |||||
component: () => import("@/views/myPassword/index.vue"), | |||||
name: "myPassword", | |||||
meta: { | |||||
title: "myPassword", | |||||
icon: "homepage", | |||||
affix: true, | |||||
name: "修改密码", | |||||
}, | |||||
}, | |||||
], | |||||
}, | }, | ||||
// 商店 | // 商店 | ||||
{ | { | ||||
@@ -8,6 +8,12 @@ | |||||
div { | div { | ||||
cursor: default; | cursor: default; | ||||
} | |||||
// 鼠标放上去变小手 | |||||
.pointer { | |||||
cursor: pointer; | |||||
} | } | ||||
.myBtn { | .myBtn { | ||||
@@ -20,22 +26,24 @@ div { | |||||
p { | p { | ||||
margin: 0; | margin: 0; | ||||
} | } | ||||
// y轴滚动盒子auto | // y轴滚动盒子auto | ||||
.scrolly { | .scrolly { | ||||
overflow-y: auto; /* 启用Y轴滚动 */ | |||||
overflow-y: auto; | |||||
/* 启用Y轴滚动 */ | |||||
// overflow-y: scroll; /* 启用Y轴滚动 */ | // overflow-y: scroll; /* 启用Y轴滚动 */ | ||||
scrollbar-width: thin; /* 在支持的浏览器上显示细的滚动条 */ | |||||
scrollbar-width: thin; | |||||
/* 在支持的浏览器上显示细的滚动条 */ | |||||
} | } | ||||
.scrolly::-webkit-scrollbar { | .scrolly::-webkit-scrollbar { | ||||
display: none; | display: none; | ||||
width: 0; | width: 0; | ||||
} | } | ||||
// 主题色 | // 主题色 | ||||
.themeColor { | .themeColor { | ||||
background: linear-gradient( | |||||
225deg, | |||||
rgb(81 217 202 / 100%), | |||||
rgb(114 100 245 / 100%) | |||||
); | |||||
} | |||||
background: linear-gradient(225deg, | |||||
rgb(81 217 202 / 100%), | |||||
rgb(114 100 245 / 100%)); | |||||
} |
@@ -10,14 +10,18 @@ | |||||
<div class="info"> | <div class="info"> | ||||
<div class="name">OLO</div> | <div class="name">OLO</div> | ||||
<span>weqrewerwer@mail.com</span> | <span>weqrewerwer@mail.com</span> | ||||
<span class="password">更改密码</span> | |||||
<span class="password pointer" @click="routerTo('/myPassword')" | |||||
>更改密码</span | |||||
> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 剩余次数 --> | <!-- 剩余次数 --> | ||||
<div class="left-two border"> | <div class="left-two border"> | ||||
<div class="number">3 Videos Generation Left</div> | <div class="number">3 Videos Generation Left</div> | ||||
<div class="time">Until 2023/12/31</div> | <div class="time">Until 2023/12/31</div> | ||||
<div class="getMore">购买更多</div> | |||||
<div class="getMore pointer" @click="routerTo('/myStore')"> | |||||
购买更多 | |||||
</div> | |||||
</div> | </div> | ||||
<!-- 邀请码 --> | <!-- 邀请码 --> | ||||
<div class="left-three border flex justify-between"> | <div class="left-three border flex justify-between"> | ||||
@@ -76,7 +80,13 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script setup></script> | |||||
<script setup> | |||||
import { useRouter } from "vue-router"; | |||||
const router = useRouter(); | |||||
function routerTo(url) { | |||||
router.push(url); | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
height: 887px; | height: 887px; | ||||
@@ -0,0 +1,38 @@ | |||||
<template> | |||||
<div class="page flex"> | |||||
<el-form | |||||
:label-position="labelPosition" | |||||
label-width="100px" | |||||
:model="formLabelAlign" | |||||
style="max-width: 460px" | |||||
> | |||||
<el-form-item label="Name"> | |||||
<el-input v-model="formLabelAlign.name" /> | |||||
</el-form-item> | |||||
<el-form-item label="Activity zone"> | |||||
<el-input v-model="formLabelAlign.region" /> | |||||
</el-form-item> | |||||
<el-form-item label="Activity form"> | |||||
<el-input v-model="formLabelAlign.type" /> | |||||
</el-form-item> | |||||
</el-form> | |||||
</div> | |||||
</template> | |||||
<script setup> | |||||
const labelPosition = ref("right"); | |||||
const formLabelAlign = reactive({ | |||||
name: "", | |||||
region: "", | |||||
type: "", | |||||
}); | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.page { | |||||
height: 887px; | |||||
padding: 20px 0 0 20px; | |||||
// height: calc(100vh - 84px); | |||||
background-color: #fff; | |||||
border-radius: 25px 0 0; | |||||
} | |||||
</style> |