| @@ -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> | |||||