Browse Source

1

dev_YWQ
congzc 2 years ago
parent
commit
4daef77c11
13 changed files with 433 additions and 268 deletions
  1. +13
    -7
      src/components/LangSelect/index.vue
  2. +61
    -12
      src/lang/package/en.ts
  3. +61
    -12
      src/lang/package/zh-cn.ts
  4. +89
    -74
      src/layout/components/Navbar.vue
  5. +8
    -4
      src/layout/components/Sidebar/index.vue
  6. +1
    -1
      src/layout/components/TagsView/index.vue
  7. +12
    -5
      src/router/index.ts
  8. +0
    -2
      src/types/auto-imports.d.ts
  9. +0
    -3
      src/types/components.d.ts
  10. +34
    -12
      src/views/createVideo/index.vue
  11. +15
    -16
      src/views/myAccount/index.vue
  12. +24
    -26
      src/views/myCreating/index.vue
  13. +115
    -94
      src/views/myStore/index.vue

+ 13
- 7
src/components/LangSelect/index.vue View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { useAppStore } from '@/store/modules/app';
import { useI18n } from "vue-i18n";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { useAppStore } from "@/store/modules/app";

const appStore = useAppStore();
const { locale } = useI18n();
@@ -9,16 +9,16 @@ const { locale } = useI18n();
function handleLanguageChange(lang: string) {
locale.value = lang;
appStore.changeLanguage(lang);
if (lang == 'en') {
ElMessage.success('Switch Language Successful!');
if (lang == "en") {
ElMessage.success("Switch Language Successful!");
} else {
ElMessage.success('切换语言成功!');
ElMessage.success("切换语言成功!");
}
}
</script>

<template>
<el-dropdown trigger="click" @command="handleLanguageChange">
<el-dropdown class="outSide" trigger="click" @command="handleLanguageChange">
<div>
<svg-icon icon-class="language" />
</div>
@@ -37,3 +37,9 @@ function handleLanguageChange(lang: string) {
</template>
</el-dropdown>
</template>

<style lang="scss" scoped>
.outSide {
cursor: pointer;
}
</style>

+ 61
- 12
src/lang/package/en.ts View File

@@ -1,22 +1,71 @@
export default {
// 路由国际化
route: {
dashboard: 'Dashboard',
document: 'Document'
dashboard: "Dashboard",
document: "Document",
},

// 登录页面国际化
login: {
title: 'Metavatar-PC',
username: 'Username',
password: 'Password',
login: 'Login',
verifyCode: 'Verify Code',
title: "Metavatar-PC",
username: "Username",
password: "Password",
login: "Login",
verifyCode: "Verify Code",
},

// 导航栏国际化
navbar: {
dashboard: 'Dashboard',
logout: 'Logout',
document: 'Document',
gitee: 'Gitee'
}
account: "Account",
logout: "Logout",
},

// 创作视频
createVideo: {
title: "CreateVideo",
typeScript: "Type your Script",
uploadAudio: "Upload Audio",
aiScript: "Ai Script",
typeTitle: "Type a title",
confirm: "Confirm",
aiText: "Please input here",
languages: "Languages",
voices: "Voices",
styles: "Styles",
reload: "Reload",
generateVideo: "Generate Video",
},

// 我的视频
myCreating: {
title: "My Creating",
typeTitle: "Type a title",
name: "Name",
date: "Date",
download: "Download",
delete: "Delete",
more: "More",
},

// 个人账户
account: {
title: "My Account",
reSetPwd: "Reset Password",
getMore: "UPGRADE",
copyCode: "Copy invitation code",
saveCode: "Save QR code",
buyHistory: "OrderHistory",
inviteHistory: "InviteHistory",
orderID: "OrderID",
price: "Price",
date: "Date",
successed: "Successed",
failed: "Failed",
msg1: "Obtain one video production time",
},

// 商店
shop: {
title: "Shop",
},
};

+ 61
- 12
src/lang/package/zh-cn.ts View File

@@ -1,22 +1,71 @@
export default {
// 路由国际化
route: {
dashboard: '首页',
document: '项目文档'
dashboard: "首页",
document: "项目文档",
},

// 登录页面国际化
login: {
title: 'Metavatar-PC',
username: '用户名',
password: '密码',
login: '登 录',
verifyCode: '验证码'
title: "Metavatar-PC",
username: "用户名",
password: "密码",
login: "登 录",
verifyCode: "验证码",
},

// 导航栏国际化
navbar: {
dashboard: '首页',
logout: '注销',
document: '项目文档',
gitee: '码云'
}
account: "账户",
logout: "注销",
},

// 创作视频
createVideo: {
title: "创作视频",
typeScript: "输入文案",
uploadAudio: "上传视频",
aiScript: "AI生成文本",
typeTitle: "输入标题",
confirm: "确定",
aiText: "在此输入",
languages: "选择语言",
voices: "选择声音",
styles: "选择风格",
reload: "重新上传",
generateVideo: "生成视频",
},

// 我的视频
myCreating: {
title: "我的视频",
typeTitle: "输入标题",
name: "名称",
date: "时间",
download: "下载",
delete: "删除",
more: "更多",
},

// 个人账户
account: {
title: "个人账户",
reSetPwd: "修改密码",
getMore: "升级套餐",
copyCode: "复制邀请码",
saveCode: "保存二维码",
buyHistory: "购买记录",
inviteHistory: "邀请记录",
orderID: "订单号",
price: "支付金额",
date: "购买日期",
successed: "支付成功",
failed: "支付失败",
msg1: "获得视频制作次数一次",
},

// 商店
shop: {
title: "商店",
},
};

+ 89
- 74
src/layout/components/Navbar.vue View File

@@ -1,3 +1,77 @@
<template>
<!-- 顶部导航栏 -->
<div class="myNavbar">
<!-- 左侧面包屑 -->
<div class="flex" v-if="false">
<hamburger
:is-active="appStore.sidebar.opened"
@toggleClick="toggleSideBar"
/>
<breadcrumb />
</div>
<!-- 右侧导航设置 -->
<div class="flex" v-if="false">
<!-- 导航栏设置(窄屏隐藏)-->
<div class="setting-container" v-if="device !== 'mobile'">
<!--全屏 -->
<div class="setting-item" @click="toggle" v-if="false">
<svg-icon
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
/>
</div>
<!-- 布局大小 -->
<el-tooltip
content="布局大小"
effect="dark"
placement="bottom"
v-if="false"
>
<size-select class="setting-item" />
</el-tooltip>
</div>
<!-- 用户头像 -->
<span class="account" @click="routerTo">个人账户</span>
<el-dropdown trigger="click" v-if="false">
<div class="avatar-container">
<img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
<i-ep-caret-bottom class="w-3 h-3" />
</div>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/">
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/hxrui">
<el-dropdown-item>Github</el-dropdown-item>
</a>
<a target="_blank" href="https://gitee.com/haoxr">
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
</a>
<a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
</a>
<el-dropdown-item divided @click="logout">
{{ $t("navbar.logout") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- 显示的,以上代码作废 -->
<div style="position: absolute; left: 30px; font-size: 26px">
{{ $t(routeName as string) }}
</div>
<!--语言选择-->
<lang-select class="navItem" style="color: #ffffff" />

<div class="avatar" @click="routerTo"></div>
<div class="navItem" @click="routerTo">{{ $t("navbar.account") }}</div>
<div class="navItem" @click="logout" style="margin-left: 10px">
{{ $t("navbar.logout") }}
</div>
</div>
</template>

<script setup lang="ts">
import { watch, ref } from "vue";
import { storeToRefs } from "pinia";
@@ -5,6 +79,7 @@ import { RouteLocationRaw, useRoute, useRouter } from "vue-router";
import { useAppStore } from "@/store/modules/app";
import { useTagsViewStore } from "@/store/modules/tagsView";
import { useUserStore } from "@/store/modules/user";
import LangSelect from "@/components/LangSelect/index.vue";

const appStore = useAppStore();
const tagsViewStore = useTagsViewStore();
@@ -61,75 +136,6 @@ watch(
);
</script>

<template>
<!-- 顶部导航栏 -->
<div class="myNavbar">
<!-- 左侧面包屑 -->
<div class="flex" v-if="false">
<hamburger
:is-active="appStore.sidebar.opened"
@toggleClick="toggleSideBar"
/>
<breadcrumb />
</div>
<!-- 右侧导航设置 -->
<div class="flex" v-if="false">
<!-- 导航栏设置(窄屏隐藏)-->
<div class="setting-container" v-if="device !== 'mobile'">
<!--全屏 -->
<div class="setting-item" @click="toggle" v-if="false">
<svg-icon
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
/>
</div>
<!-- 布局大小 -->
<el-tooltip
content="布局大小"
effect="dark"
placement="bottom"
v-if="false"
>
<size-select class="setting-item" />
</el-tooltip>
<!--语言选择-->
<lang-select class="setting-item" v-if="false" />
</div>
<!-- 用户头像 -->
<span @click="routerTo">个人账户</span>
<el-dropdown trigger="click" v-if="false">
<div class="avatar-container">
<img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
<i-ep-caret-bottom class="w-3 h-3" />
</div>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/">
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/hxrui">
<el-dropdown-item>Github</el-dropdown-item>
</a>
<a target="_blank" href="https://gitee.com/haoxr">
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
</a>
<a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
</a>
<el-dropdown-item divided @click="logout">
{{ $t("navbar.logout") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- 显示的,以上代码作废 -->
<div style="position: absolute; left: 30px">{{ routeName }}</div>
<div class="avatar"></div>
<div @click="routerTo">个人账户</div>
<div @click="logout" style="margin-left: 10px">退出登录</div>
</div>
</template>

<style lang="scss" scoped>
.navbar {
display: flex;
@@ -151,9 +157,9 @@ watch(
color: #5a5e66;
text-align: center;
cursor: pointer;
margin-right: 25px;
&:hover {
background: rgb(249 250 251 / 100%);
background: #f9fafb;
}
}
}
@@ -177,7 +183,7 @@ watch(
display: flex;
align-items: center;
justify-content: flex-end;
height: 50px;
height: 80px;
padding: 0 20px;
color: #fff;
background-color: #fff;
@@ -187,9 +193,18 @@ watch(
.avatar {
width: 30px;
height: 30px;
margin-right: 5px;
background-color: red;
margin-right: 10px;
margin-left: 20px;
background-color: #4769da;
border-radius: 50%;
cursor: pointer;
}
.navItem {
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #4769da;
}
}
}
</style>

+ 8
- 4
src/layout/components/Sidebar/index.vue View File

@@ -7,19 +7,19 @@
<div class="icon">
<el-icon><i-ep-edit /></el-icon>
</div>
创作视频
{{ $t("createVideo.title") }}
</div>
<div class="myRouter-item" @click="routerTo('/myCreating')">
<div class="icon">
<el-icon><i-ep-menu /></el-icon>
</div>
我的视频
{{ $t("myCreating.title") }}
</div>
<div class="myRouter-item pricing" @click="routerTo('/myStore')">
<div class="icon">
<el-icon><i-ep-Goods /></el-icon>
</div>
商店
{{ $t("shop.title") }}
</div>
</div>
<!-- <el-scrollbar>
@@ -91,6 +91,10 @@ function routerTo(url: RouteLocationRaw) {
text-align: center;
cursor: pointer;
border-bottom: 2px solid #fff;
transition: all 0.3s;
border-radius: 5px;
margin-bottom: 20px;
margin-right: 20px;

.icon {
width: 40px;
@@ -110,7 +114,7 @@ function routerTo(url: RouteLocationRaw) {

&:hover {
color: #000;
background-color: #fff;
background-color: #ffffff;

.el-icon {
color: #000;


+ 1
- 1
src/layout/components/TagsView/index.vue View File

@@ -242,7 +242,7 @@ onMounted(() => {
</script>

<template>
<div class="tags-container" v-if="false">
<div v-if="false" class="tags-container">
<scroll-pane ref="scrollPaneRef" @scroll="handleScroll">
<router-link
:class="'tags-item ' + (isActive(tag) ? 'active' : '')"


+ 12
- 5
src/router/index.ts View File

@@ -1,4 +1,5 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import { getCurrentInstance } from "vue";

export const Layout = () => import("@/layout/index.vue");

@@ -35,7 +36,7 @@ export const constantRoutes: RouteRecordRaw[] = [
title: "createVideo",
icon: "homepage",
affix: true,
name: "创作视频",
name: "createVideo.title",
},
},
],
@@ -54,7 +55,7 @@ export const constantRoutes: RouteRecordRaw[] = [
title: "myCreating",
icon: "homepage",
affix: true,
name: "我的视频",
name: "myCreating.title",
},
},
],
@@ -73,7 +74,7 @@ export const constantRoutes: RouteRecordRaw[] = [
title: "myAccount",
icon: "homepage",
affix: true,
name: "个人账户",
name: "account.title",
},
},
],
@@ -106,7 +107,12 @@ export const constantRoutes: RouteRecordRaw[] = [
path: "myStore",
component: () => import("@/views/myStore/index.vue"),
name: "myStore",
meta: { title: "myStore", icon: "homepage", affix: true, name: "商店" },
meta: {
title: "myStore",
icon: "homepage",
affix: true,
name: "shop.title",
},
},
],
},
@@ -194,7 +200,8 @@ const router = createRouter({
history: createWebHashHistory(),
routes: constantRoutes as RouteRecordRaw[],
// 刷新时,滚动条位置还原
scrollBehavior: () => ({ left: 0, top: 0 }),
// 2023-5-23 添加平滑滚动 YWQ
scrollBehavior: () => ({ behavior: "smooth", left: 0, top: 0 }),
});

/**


+ 0
- 2
src/types/auto-imports.d.ts View File

@@ -2,7 +2,6 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const ElForm: typeof import('element-plus/es')['ElForm']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
@@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue'
declare module 'vue' {
interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>


+ 0
- 3
src/types/components.d.ts View File

@@ -20,13 +20,10 @@ declare module '@vue/runtime-core' {
ElFormItem: typeof import('element-plus/es')['ElFormItem']
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']


+ 34
- 12
src/views/createVideo/index.vue View File

@@ -8,12 +8,15 @@
<el-row class="justify-between">
<!-- title框 -->
<div class="flex justify-between" style="width: 300px">
<el-input v-model="title" placeholder="输入标题" />
<el-input
v-model="title"
:placeholder="$t('createVideo.typeTitle')"
/>
<el-icon class="icon-edit"><i-ep-edit /></el-icon>
</div>
<!-- 上传按钮 -->
<button class="uploadBtn">
重新上传
{{ $t("createVideo.reload") }}
<input type="file" @change="changeFile" />
</button>
</el-row>
@@ -60,30 +63,35 @@
<div class="right">
<el-tabs type="border-card" class="tabs">
<!-- ----------------------------- 1 -->
<el-tab-pane label="Type you Script">
<el-tab-pane :label="$t('createVideo.typeScript')">
<div class="card1">111111111111111111</div>
</el-tab-pane>
<!-- ------------------------ 2 -->
<el-tab-pane label="upload audio">
<el-tab-pane :label="$t('createVideo.uploadAudio')">
<div class="card2">22222222222222222</div>
</el-tab-pane>
<!-- ----------------------- 3 -->
<el-tab-pane label="Ai Script">
<el-tab-pane :label="$t('createVideo.aiScript')">
<div class="card3">
<div class="text">
<el-input v-model="title" placeholder="输入标题" />
<el-button type="primary"> submit </el-button>
<el-input
v-model="title"
:placeholder="$t('createVideo.typeTitle')"
/>
<el-button type="primary">
{{ $t("createVideo.confirm") }}
</el-button>
<el-input
v-model="title"
:rows="15"
type="textarea"
placeholder="Please input"
:placeholder="$t('createVideo.aiText')"
/>
<el-icon :size="20">
<Edit />
</el-icon>
</div>
<p>language</p>
<p>{{ $t("createVideo.languages") }}</p>
<el-select
v-model="language"
placeholder="Select"
@@ -96,7 +104,7 @@
:value="item.value"
/>
</el-select>
<p>voices</p>
<p>{{ $t("createVideo.voices") }}</p>
<el-select
v-model="language"
placeholder="Select"
@@ -109,7 +117,7 @@
:value="item.value"
/>
</el-select>
<p>style</p>
<p>{{ $t("createVideo.styles") }}</p>
<el-select
v-model="language"
placeholder="Select"
@@ -122,7 +130,9 @@
:value="item.value"
/>
</el-select>
<el-button type="primary">Generate Video</el-button>
<el-button type="primary">{{
$t("createVideo.generateVideo")
}}</el-button>
</div>
</el-tab-pane>
</el-tabs>
@@ -139,8 +149,20 @@ function changeFile(e) {
imgUrl.value = URL.createObjectURL(e.target.files[0]);
}

// $t在script中的使用
import { getCurrentInstance } from "vue";
const {
appContext: {
config: { globalProperties },
},
} = getCurrentInstance();

const string = "createVideo.typeScript";
const t = globalProperties.$t(string);

// card3的
let language = reactive("");

let languageOptions = reactive([
{
value: "Option1",


+ 15
- 16
src/views/myAccount/index.vue View File

@@ -10,9 +10,9 @@
<div class="info">
<div class="name">OLO</div>
<span>weqrewerwer@mail.com</span>
<span class="password pointer" @click="routerTo('/myPassword')"
>更改密码</span
>
<span class="password pointer" @click="routerTo('/myPassword')">{{
$t("account.reSetPwd")
}}</span>
</div>
</div>
<!-- 剩余次数 -->
@@ -20,7 +20,7 @@
<div class="number">3 Videos Generation Left</div>
<div class="time">Until 2023/12/31</div>
<div class="getMore pointer" @click="routerTo('/myStore')">
购买更多
{{ $t("account.getMore") }}
</div>
</div>
<!-- 邀请码 -->
@@ -34,8 +34,8 @@
<span class="bigWord">Generation</span>
</div>
<div class="btns">
<span class="myBtn">复制邀请码</span>
<span class="myBtn">保存二维码</span>
<span class="myBtn">{{ $t("account.copyCode") }}</span>
<span class="myBtn">{{ $t("account.saveCode") }}</span>
</div>
</div>
</div>
@@ -44,24 +44,24 @@
<div class="right">
<el-tabs type="border-card" class="tabs">
<!-- ----------------------------- 1 -->
<el-tab-pane label="购买记录">
<el-tab-pane :label="$t('account.buyHistory')">
<div class="card scrolly">
<div class="orderItem" v-for="item in 9" :key="item">
<p>订单号:123456</p>
<p>{{ $t("account.orderID") }}: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>
<p>{{ $t("account.price") }}:88$</p>
<p>{{ $t("account.date") }}:2023/5/2</p>
</div>
<div class="state">支付成功</div>
<div class="state">{{ $t("account.successed") }}</div>
</div>
</div>
</div>
</el-tab-pane>
<!-- ------------------------ 2 -->
<el-tab-pane label="邀请记录">
<el-tab-pane :label="$t('account.inviteHistory')">
<div class="card scrolly card2">
<div class="orderItem" v-for="item in 9" :key="item">
<div class="orderItem-content">
@@ -69,9 +69,9 @@
<div class="info">
<h5>张{{ item }}</h5>
<p>E-mail:65465468765465@gmail.com</p>
<p>time:2023/5/2</p>
<p>{{ $t("account.date") }}:2023/5/2</p>
</div>
<div class="state">获得视频制作次数一次</div>
<div class="state">{{ $t("account.msg1") }}</div>
</div>
</div>
</div>
@@ -247,7 +247,7 @@ function routerTo(url) {
}

.state {
width: 10%;
margin-right: 30px;
}
}
}
@@ -263,7 +263,6 @@ function routerTo(url) {
}

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


+ 24
- 26
src/views/myCreating/index.vue View File

@@ -3,7 +3,7 @@
<!-- 搜索框 -->
<div class="top">
<div class="flex justify-between" style="width: 300px">
<el-input v-model="title" placeholder="输入标题" />
<el-input v-model="title" :placeholder="$t('myCreating.typeTitle')" />
<el-icon class="icon-edit"><i-ep-edit /></el-icon>
</div>
</div>
@@ -14,8 +14,8 @@
<img class="inmiddle" src="" alt="" />
</div>
<div class="workInfo flex">
<span>名称</span>
<span>时间</span>
<span>{{ $t("myCreating.name") }}</span>
<span>{{ $t("myCreating.date") }}</span>
</div>
<!-- 更多遮罩层 -->
<div
@@ -30,13 +30,13 @@
<div class="btns-item-icon">
<el-icon class="icon-delete"><i-ep-download /></el-icon>
</div>
<div class="text">下载</div>
<div class="text">{{ $t("myCreating.download") }}</div>
</div>
<div class="btns-item">
<div class="btns-item-icon">
<el-icon class="icon-delete"><i-ep-delete /></el-icon>
</div>
<div class="text">删除</div>
<div class="text">{{ $t("myCreating.delete") }}</div>
</div>
</div>
</div>
@@ -60,13 +60,14 @@
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="showDialog = false"
><el-icon class="icon-delete"><i-ep-download /></el-icon
>下载</el-button
>
<el-button @click="showDialog = false">
<el-icon class="icon-delete"><i-ep-delete /></el-icon>删除
</el-button>
<button class="elBtn" type="primary" @click="showDialog = false">
<el-icon class="icon-delete"><i-ep-download /></el-icon
>{{ $t("myCreating.download") }}
</button>
<button class="elBtn" @click="showDialog = false">
<el-icon class="icon-delete"><i-ep-delete /></el-icon
>{{ $t("myCreating.delete") }}
</button>
</span>
</template>
</el-dialog>
@@ -187,17 +188,17 @@ function mouseenter(item) {
position: absolute;
top: 45px;
right: 10px;
width: 70px;
height: 60px;
// width: 70px;
// height: 60px;
overflow: hidden;
border-radius: 10px;

&-item {
width: 70px;
height: 30px;
// width: 70px;
// height: 30px;
text-align: center;
background-color: #fff;
padding: 0 10px;
&-icon {
position: relative;
display: inline-block;
@@ -261,18 +262,15 @@ function mouseenter(item) {
display: flex;
justify-content: space-between;

:deep(.el-button) {
.elBtn {
color: #fff;
background-color: #000 !important;
border: none;
border-radius: 10px;

padding: 5px 10px;
cursor: pointer;
background-color: #000;
transition: all 0.3s;
&:hover {
background: linear-gradient(
225deg,
rgb(81 217 202 / 100%),
rgb(114 100 245 / 100%)
);
background-color: #15d1b8;
}
}



+ 115
- 94
src/views/myStore/index.vue View File

@@ -2,37 +2,37 @@
<div class="page">
<div class="commoditylIst">
<div class="item" v-for="item in list" :key="item.title">
<div class="line" :style="`background-color:${item.color} ;`"></div>
<div class="info">
<!-- 商品信息 -->
<div class="content">
<div class="title">
<el-icon><i-ep-edit /></el-icon>
{{ item.title }}
<div @click="clickPayDialog(item)">
<div class="line" :style="`background-color:${item.color} ;`"></div>
<div class="info">
<!-- 商品信息 -->
<div class="content">
<div class="title">
<el-icon><i-ep-edit /></el-icon>
{{ item.title }}
</div>
<div class="money">
<span class="price">{{ item.price }}元</span>/{{
item.priceTime
}}
</div>
<div class="time">
<span>{{ item.time }}</span
>分钟/月
</div>
<div class="button" :style="`background-color:${item.color} ;`">
选择方案
</div>
</div>
<div class="money">
<span class="price">{{ item.price }}元</span>/{{ item.priceTime }}
</div>
<div class="time">
<span>{{ item.time }}</span
>分钟/月
</div>
<div
@click="clickPayDialog(item)"
class="button"
:style="`background-color:${item.color} ;`"
>
选择方案
</div>
</div>
<!-- 商品权益 -->
<div class="authority">
<div
class="authority-item"
v-for="items in item.authority"
:key="items"
>
<span>✔</span>{{ items }}
<!-- 商品权益 -->
<div class="authority">
<div
class="authority-item"
v-for="items in item.authority"
:key="items"
>
<span>✔</span>{{ items }}
</div>
</div>
</div>
</div>
@@ -159,82 +159,103 @@ function clickPayDialog(item) {
height: 100%;
// scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */
// -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */
}
.item {
width: 350px;
height: 100%;
margin-left: 50px;
background-color: #fffefd;
flex-shrink: 0; /* 防止缩小宽度 */
border: 1px solid #c0bfbd;
border-radius: 20px;
overflow: hidden;
.line {
height: 20px;
background-color: pink;
}
.info {
padding: 20px;
.content {
height: 300px;
.item {
width: 350px;
height: 100%;
margin-left: 50px;
background-color: #fffefd;
flex-shrink: 0; /* 防止缩小宽度 */
border: 1px solid #c0bfbd;
border-radius: 20px;
overflow: hidden;
transition: all 0.2s;
cursor: pointer;
.line {
height: 20px;
background-color: pink;
cursor: pointer;
}
.info {
padding: 20px;
border-bottom: 1px solid #c0bfbd;
.title {
font-size: 30px;
font-weight: 700;
line-height: 25px;
margin-bottom: 30px;
.el-icon {
line-height: 30px;
width: 40px;
height: 40px;
font-size: 40px;
color: #000;
text-align: center;
vertical-align: sub;
}
}
.money {
margin-bottom: 30px;
font-size: 20px;
color: #7c7c7a;
.price {
cursor: pointer;
.content {
height: 300px;
padding: 20px;
border-bottom: 1px solid #c0bfbd;
cursor: pointer;
.title {
font-size: 30px;
font-weight: 700;
color: #242625;
line-height: 25px;
margin-bottom: 30px;
cursor: pointer;
.el-icon {
line-height: 30px;
width: 40px;
height: 40px;
font-size: 40px;
color: #000;
text-align: center;
vertical-align: sub;
cursor: pointer;
}
}
}
.time {
margin-bottom: 30px;
font-size: 20px;
color: #7c7c7a;
span {
.money {
margin-bottom: 30px;
font-size: 20px;
color: #7c7c7a;
cursor: pointer;
.price {
font-size: 30px;
font-weight: 700;
color: #242625;
cursor: pointer;
}
}
.time {
margin-bottom: 30px;
font-size: 20px;
color: #7c7c7a;
cursor: pointer;
span {
font-weight: 700;
color: #242625;
cursor: pointer;
}
}
.button {
width: 100%;
height: 40px;
border-radius: 10px;
text-align: center;
line-height: 40px;
color: #fff;
font-weight: 700;
color: #242625;
background-color: yellow;
cursor: pointer;
}
}
.button {
width: 100%;
height: 40px;
border-radius: 10px;
text-align: center;
line-height: 40px;
color: #fff;
font-weight: 700;
background-color: yellow;
}
}
.authority {
&-item {
padding: 20px 10px;
span {
color: #7c7c7a;
margin-right: 30px;
.authority {
cursor: pointer;
&-item {
cursor: pointer;
padding: 20px 10px;
span {
cursor: pointer;
color: #7c7c7a;
margin-right: 30px;
}
}
}
}
&:hover {
cursor: pointer;
transform: translateY(-20px);
box-shadow: #00000026 2px 2px 2px 2px;
}
}
}

.commodityList::-webkit-scrollbar {
display: none; /* 隐藏滚动条(Safari、Chrome) */
}


Loading…
Cancel
Save