Bläddra i källkod

feat: 添加购买记录列表

dev_YWQ
congzc 1 år sedan
förälder
incheckning
15cd7f3a93
4 ändrade filer med 1076 tillägg och 624 borttagningar
  1. +17
    -0
      src/styles/my.scss
  2. +887
    -531
      src/types/auto-imports.d.ts
  3. +40
    -73
      src/types/components.d.ts
  4. +132
    -20
      src/views/myAccount/index.vue

+ 17
- 0
src/styles/my.scss Visa fil

@@ -5,12 +5,29 @@
transform: translateX(-50%);
// transform: translate(-50%, -50%);
}

div {
cursor: default;
}

.myBtn {
padding: 5px 10px;
text-align: center;
border: 1px solid #000;
border-radius: 5px;
}

p {
margin: 0;
}
// y轴滚动盒子auto
.scrolly {
overflow-y: auto; /* 启用Y轴滚动 */
// overflow-y: scroll; /* 启用Y轴滚动 */
scrollbar-width: thin; /* 在支持的浏览器上显示细的滚动条 */
}

.scrolly::-webkit-scrollbar {
display: none;
width: 0;
}

+ 887
- 531
src/types/auto-imports.d.ts
Filskillnaden har hållits tillbaka eftersom den är för stor
Visa fil


+ 40
- 73
src/types/components.d.ts Visa fil

@@ -1,81 +1,48 @@
// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
import "@vue/runtime-core";

export {}
export {};

declare module '@vue/runtime-core' {
declare module "@vue/runtime-core" {
export interface GlobalComponents {
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCol: typeof import('element-plus/es')['ElCol']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTree: typeof import('element-plus/es')['ElTree']
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
ElUpload: typeof import('element-plus/es')['ElUpload']
GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default']
Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
IEpClose: typeof import('~icons/ep/close')['default']
IEpCollection: typeof import('~icons/ep/collection')['default']
IEpDelete: typeof import('~icons/ep/delete')['default']
IEpDownload: typeof import('~icons/ep/download')['default']
IEpEdit: typeof import('~icons/ep/edit')['default']
IEpPlus: typeof import('~icons/ep/plus')['default']
IEpPosition: typeof import('~icons/ep/position')['default']
IEpRefresh: typeof import('~icons/ep/refresh')['default']
IEpRefreshLeft: typeof import('~icons/ep/refresh-left')['default']
IEpSearch: typeof import('~icons/ep/search')['default']
IEpSetting: typeof import('~icons/ep/setting')['default']
IEpTop: typeof import('~icons/ep/top')['default']
IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']
Pagination: typeof import('./../components/Pagination/index.vue')['default']
RightPanel: typeof import('./../components/RightPanel/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default']
SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default']
SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
WangEditor: typeof import('./../components/WangEditor/index.vue')['default']
}
export interface ComponentCustomProperties {
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
Breadcrumb: typeof import("./../components/Breadcrumb/index.vue")["default"];
ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
ElButton: typeof import("element-plus/es")["ElButton"];
ElDivider: typeof import("element-plus/es")["ElDivider"];
ElDropdown: typeof import("element-plus/es")["ElDropdown"];
ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"];
ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"];
ElIcon: typeof import("element-plus/es")["ElIcon"];
ElInput: typeof import("element-plus/es")["ElInput"];
ElMenu: typeof import("element-plus/es")["ElMenu"];
ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
ElOption: typeof import("element-plus/es")["ElOption"];
ElRow: typeof import("element-plus/es")["ElRow"];
ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
ElSelect: typeof import("element-plus/es")["ElSelect"];
ElSubMenu: typeof import("element-plus/es")["ElSubMenu"];
ElSwitch: typeof import("element-plus/es")["ElSwitch"];
ElTabPane: typeof import("element-plus/es")["ElTabPane"];
ElTabs: typeof import("element-plus/es")["ElTabs"];
ElTooltip: typeof import("element-plus/es")["ElTooltip"];
GithubCorner: typeof import("./../components/GithubCorner/index.vue")["default"];
Hamburger: typeof import("./../components/Hamburger/index.vue")["default"];
IconSelect: typeof import("./../components/IconSelect/index.vue")["default"];
IEpCaretBottom: typeof import("~icons/ep/caret-bottom")["default"];
IEpClose: typeof import("~icons/ep/close")["default"];
IEpSetting: typeof import("~icons/ep/setting")["default"];
LangSelect: typeof import("./../components/LangSelect/index.vue")["default"];
MultiUpload: typeof import("./../components/Upload/MultiUpload.vue")["default"];
Pagination: typeof import("./../components/Pagination/index.vue")["default"];
RightPanel: typeof import("./../components/RightPanel/index.vue")["default"];
RouterLink: typeof import("vue-router")["RouterLink"];
RouterView: typeof import("vue-router")["RouterView"];
SingleUpload: typeof import("./../components/Upload/SingleUpload.vue")["default"];
SizeSelect: typeof import("./../components/SizeSelect/index.vue")["default"];
SvgIcon: typeof import("./../components/SvgIcon/index.vue")["default"];
WangEditor: typeof import("./../components/WangEditor/index.vue")["default"];
}
}

+ 132
- 20
src/views/myAccount/index.vue Visa fil

@@ -41,11 +41,36 @@
<el-tabs type="border-card" class="tabs">
<!-- ----------------------------- 1 -->
<el-tab-pane label="购买记录">
<div class="card1">111111111111111111</div>
<div class="card scrolly">
<div class="orderItem" v-for="item in 9" :key="item">
<p>订单号:123456</p>
<div class="orderItem-content">
<div class="orderCode"><img src="" alt="" /></div>
<div class="info">
<h5>疯狂星期{{ item }}</h5>
<p>Price:88$</p>
<p>time:2023/5/2</p>
</div>
<div class="state">支付成功</div>
</div>
</div>
</div>
</el-tab-pane>
<!-- ------------------------ 2 -->
<el-tab-pane label="邀请记录">
<div class="card2">22222222222222222</div>
<div class="card scrolly card2">
<div class="orderItem" v-for="item in 9" :key="item">
<div class="orderItem-content">
<div class="orderCode"><img src="" alt="" /></div>
<div class="info">
<h5>张{{ item }}</h5>
<p>E-mail:65465468765465@gmail.com</p>
<p>time:2023/5/2</p>
</div>
<div class="state">获得视频制作次数一次</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
@@ -54,56 +79,66 @@
<script setup></script>
<style lang="scss" scoped>
.page {
height: calc(100vh - 84px);
background-color: #fff;
height: 844px;
padding: 20px 0 0 20px;
// height: calc(100vh - 84px);
background-color: #fff;
}

.left {
width: 35%;
height: 100%;
margin-right: 2%;

.border {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #000;
border-radius: 5px;
margin-bottom: 10px;
}

&-one {
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: red;
margin-right: 10px;
background-color: red;
border-radius: 50%;
}

.info {
flex: 1;

.name {
margin-top: 10px;
height: 30px;
margin-top: 10px;
font-size: 20px;
}

.password {
float: right;
display: inline-block;
float: right;
padding: 2px 8px;
border: 1px solid #000;
border-radius: 5px;
}
}
}

&-two {
height: 80px;
position: relative;
height: 80px;

.number {
font-weight: 700;
font-size: 30px;
font-weight: 700;
}

.time {
position: absolute;
right: 90px;
}

.getMore {
position: absolute;
top: -1px;
@@ -113,26 +148,29 @@
line-height: 80px;
text-align: center;
background-color: skyblue;
position: absolute;
}
}

&-three {
.codeImg {
width: 120px;
height: 120px;
background-color: red;
margin-right: 10px;
background-color: red;
}

.other {
position: relative;
flex: 1;

.btns {
width: 100%;
position: absolute;
bottom: 10px;
// padding: 0 80px;
display: flex;
justify-content: space-evenly;
width: 100%;

.myBtn {
margin-right: 10px;
}
@@ -140,22 +178,93 @@
}
}
}

.right {
width: 61%;
height: 95%;
height: 800px;
// height: 95%;
border: 1px solid #000;

// element组件样式
:deep(.el-tabs--border-card) {
border: none;
font-size: 20px;
border: none;
}

.tabs {
height: 100%;
height: 760px;
// height: 100%;
.card {
// height: 100%;
height: 740px;
padding: 10px;
// height: 79vh;
.orderItem {
width: 100%;
height: 110px;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #000;
border-radius: 5px;

p {
font-size: 12px;
}

&-content {
display: flex;
width: 100%;
// justify-content: space-between;
.orderCode {
width: 70px;
height: 70px;
background-color: skyblue;
}

.info {
// width: 50%;
flex: 1;
margin-left: 10px;

h5 {
margin: 0;
}

p {
margin-top: 5px;
}
}

.state {
width: 10%;
}
}
}
}

.card2 {
.orderItem {
padding: 20px;

&-content {
.orderCode {
border-radius: 50%;
}

.state {
width: 15%;
font-size: 14px;
line-height: 60px;
}
}
}
}

:deep(.el-tabs__item.is-active) {
background-color: #000;
color: #fff;
background-color: #000;
}

:deep(.el-tabs__nav) {
width: 100%;
}
@@ -163,11 +272,14 @@
:deep(.el-tabs__item) {
width: 34%;
}

:deep(.el-tabs__item:hover) {
color: #909393;
}

:deep(.el-tabs__content) {
height: calc(100% - 60px);
height: 760px;
// height: calc(100% - 60px);
padding: 0;
}
}
@@ -175,7 +287,7 @@

// 公共类名
.bigWord {
font-weight: 700;
font-size: 30px;
font-weight: 700;
}
</style>

Laddar…
Avbryt
Spara