uptada style
This commit is contained in:
parent
1ac734775d
commit
491bcd8d13
@ -1,23 +1,15 @@
|
||||
<template>
|
||||
<div class="navbar"
|
||||
style="height: 48px;background-color: white;color: white!important;">
|
||||
<div class="navbar" style="height: 48px;background-color: white;color: white!important;">
|
||||
<div class="logo" v-if="isShowKbossCharge">
|
||||
<img @click="$router.push('/product/productHome')" src="./img/img.png" alt=""
|
||||
class="img">
|
||||
<img @click="$router.push('/product/productHome')" src="./img/img.png" alt="" class="img">
|
||||
<span style="color: #423f3f;font-size: 20px;margin-left: 15px">平台充值中心</span>
|
||||
</div>
|
||||
<!-- v-show="!role.includes('客户')" -->
|
||||
<!-- v-if="!isShowKbossCharge&&!role.includes('客户')||isMobileScreen"-->
|
||||
<hamburger
|
||||
|
||||
v-if="false"
|
||||
style="display: flex;justify-content: center;align-items: center;color: white!important;"
|
||||
id="hamburger-container" :is-active="sidebar.opened"
|
||||
class="hamburger-container"
|
||||
@toggleClick="toggleSideBar"/>
|
||||
<hamburger v-if="false" style="display: flex;justify-content: center;align-items: center;color: white!important;"
|
||||
id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<breadcrumb style="color:white!important;display: flex;justify-content: center;align-items: center;height: 100%;"
|
||||
id="breadcrumb-container"
|
||||
class="breadcrumb-container"/>
|
||||
id="breadcrumb-container" class="breadcrumb-container" />
|
||||
<div class="right-menu"
|
||||
style="display:flex;justify-content: center!important;align-items: center!important;margin-right: 10px;">
|
||||
<template style="justify-content: center;align-items: center;transform: translate(0,-30px)!important;">
|
||||
@ -32,8 +24,7 @@
|
||||
<el-tooltip v-if="role.includes('客户')" class="item" effect="dark" content="查询产品" placement="bottom">
|
||||
<span class="right-menu-item hover-effect"
|
||||
style="font-size: 26px;display: flex;justify-content: center;align-items: center">
|
||||
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-search"
|
||||
@click="showSearch"/>
|
||||
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-search" @click="showSearch" />
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip class="item " effect="dark" content="购物车" placement="bottom" v-if="org_type==2||org_type==3">-->
|
||||
@ -58,8 +49,7 @@
|
||||
<el-tooltip v-if="!role.includes('客户')" class="item" effect="dark" content="可视化大屏" placement="bottom">
|
||||
<span class="right-menu-item hover-effect"
|
||||
style="font-size: 26px;display: flex;justify-content: center;align-items: center">
|
||||
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-s-data"
|
||||
@click="goScreen"/>
|
||||
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-s-data" @click="goScreen" />
|
||||
</span>
|
||||
</el-tooltip>
|
||||
|
||||
@ -69,8 +59,7 @@
|
||||
</template>
|
||||
<!-- <el-tooltip class="item" effect="dark" content="操作" placement="bottom"> -->
|
||||
<el-dropdown @visible-change="handleShow" class="avatar-container right-menu-item hover-effect nick-name-style"
|
||||
style="margin-right: 0"
|
||||
trigger="click">
|
||||
style="margin-right: 0" trigger="click">
|
||||
<div class="avatar-wrapper">
|
||||
<!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> -->
|
||||
<i
|
||||
@ -84,26 +73,17 @@
|
||||
<!-- <div class="block"><el-avatar shape="square" size=small :src="squareUrl"></el-avatar></div> -->
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided>
|
||||
<div
|
||||
style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
|
||||
<div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
|
||||
<span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span>
|
||||
<span
|
||||
style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID: <span
|
||||
ref="contentToCopy">
|
||||
<span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:
|
||||
<span ref="contentToCopy">
|
||||
{{
|
||||
userId
|
||||
}}
|
||||
|
||||
</span>
|
||||
<svg
|
||||
@click="copyBtn"
|
||||
class="copy-btn"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="12"
|
||||
height="12"
|
||||
style="fill: #1019ab;"
|
||||
>
|
||||
<svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
|
||||
width="12" height="12" style="fill: #1019ab;">
|
||||
<path
|
||||
d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
|
||||
p-id="1521"></path>
|
||||
@ -111,12 +91,11 @@
|
||||
</span>
|
||||
</div>
|
||||
<el-divider style="margin: 0!important;"></el-divider>
|
||||
<div
|
||||
v-if="role.includes('客户')"
|
||||
<div v-if="role.includes('客户')"
|
||||
style="padding: 0 18px; width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center">
|
||||
|
||||
<span style="color:#666;display: block;font-size: 14px;"
|
||||
class="moneyNow"><span style="display: block;margin-bottom: 5px">余额</span>{{
|
||||
<span style="color:#666;display: block;font-size: 14px;" class="moneyNow"><span
|
||||
style="display: block;margin-bottom: 5px">余额</span>{{
|
||||
mybalance ? mybalance : initMybalance()
|
||||
}} ￥</span>
|
||||
<el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
|
||||
@ -124,8 +103,7 @@
|
||||
充值
|
||||
</el-button>
|
||||
</div>
|
||||
<el-dropdown-item v-if="role.includes('客户')"
|
||||
@click.native="$router.push('/customer/customerInformation')">
|
||||
<el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')">
|
||||
<span style="display: block">个人中心</span>
|
||||
</el-dropdown-item>
|
||||
<!-- channelManagementShow=true-->
|
||||
@ -204,8 +182,8 @@
|
||||
<el-button size="mini" type="danger" @click="delMessage">删除</el-button>
|
||||
</div>
|
||||
<el-table :header-cell-style="rowClass" @row-click="expandChangeHandler1" class="table" ref="table"
|
||||
@expand-change="expandChangeHandler" :row-class-name="rowStyle" :data="unreadMessageList"
|
||||
height="680" tooltip-effect="dark" @selection-change="handleSelectionChange">
|
||||
@expand-change="expandChangeHandler" :row-class-name="rowStyle" :data="unreadMessageList" height="680"
|
||||
tooltip-effect="dark" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="expand" width="30px">
|
||||
<template slot-scope="props">
|
||||
<div class="msgtext">
|
||||
@ -335,7 +313,7 @@
|
||||
|
||||
<!-- 修改密码弹窗 -->
|
||||
<el-dialog title="修改密码" :visible.sync="passwordDialog" width="45%" :before-close="handleClose1"
|
||||
style="width: 80%">
|
||||
custom-class="password-dialog" class="password-dialog-wrapper">
|
||||
<el-form ref="passwordForm" :model="passwordForm" label-width="120px" style="width: 80%" :rules="rules">
|
||||
<el-form-item label="旧密码:" prop="password">
|
||||
<el-input v-model="passwordForm.password" placeholder="请输入旧密码" show-password></el-input>
|
||||
@ -425,11 +403,9 @@
|
||||
</el-dialog>
|
||||
<!-- 渠道管理-->
|
||||
|
||||
<el-dialog
|
||||
title="渠道管理信息提示"
|
||||
:visible.sync="channelManagementShow"
|
||||
custom-class="channel-dialog-style">
|
||||
<span class="indent">开元云公司作为一级分销商面对直接客户，售出设备产品。产品由供应商上传平台，设置产品价格配置，及设备账号密码等配置信息，开元云进行审核，审核通过产品上线，客户可直接购买。开元云可以将产品分配给各供应商销售，分配时配置给供应商的折扣，供应商得到产品及开元云的折扣后，设置折扣面向客户，客户通过kboss进行购买，分销商的客户如自己上传产品，也可以成为开元云的供应商。</span>
|
||||
<el-dialog title="渠道管理信息提示" :visible.sync="channelManagementShow" custom-class="channel-dialog-style">
|
||||
<span
|
||||
class="indent">开元云公司作为一级分销商面对直接客户，售出设备产品。产品由供应商上传平台，设置产品价格配置，及设备账号密码等配置信息，开元云进行审核，审核通过产品上线，客户可直接购买。开元云可以将产品分配给各供应商销售，分配时配置给供应商的折扣，供应商得到产品及开元云的折扣后，设置折扣面向客户，客户通过kboss进行购买，分销商的客户如自己上传产品，也可以成为开元云的供应商。</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="channelManagementShow = false">取 消</el-button>
|
||||
<el-button type="primary" @click="ChannelConfirmBtn">我已知晓，并进行后续操作</el-button>
|
||||
@ -438,11 +414,7 @@
|
||||
|
||||
<!-- searhcDiaolog-->
|
||||
|
||||
<el-dialog
|
||||
title="全站搜索"
|
||||
:visible.sync="searchDialogVisible"
|
||||
width="800px"
|
||||
:close-on-click-modal="false"
|
||||
<el-dialog title="全站搜索" :visible.sync="searchDialogVisible" width="800px" :close-on-click-modal="false"
|
||||
:before-close="handleClose">
|
||||
<el-input placeholder="请输入搜索关键字" v-model="searchValue" class="input-with-select">
|
||||
<el-button @click="searchBtn" :loading="searchLoading" slot="append" icon="el-icon-search"></el-button>
|
||||
@ -450,14 +422,11 @@
|
||||
|
||||
<ul v-loading="searchLoading" class="searchUl" v-if="searchResultList.length > 0">
|
||||
<li v-for="(item, index) in searchResultList" :key="index">
|
||||
<span class="title" @click="goProductPage(item)"><div style="margin-right: 5px">{{ item.product_name }}</div> <img
|
||||
v-if="item.type=='jd'"
|
||||
src="./images/京东云.svg"
|
||||
alt="">
|
||||
<img
|
||||
v-else-if="item.type=='bd'"
|
||||
src="./images/百度智能云.svg"
|
||||
alt=""></span>
|
||||
<span class="title" @click="goProductPage(item)">
|
||||
<div style="margin-right: 5px">{{ item.product_name }}</div> <img v-if="item.type == 'jd'"
|
||||
src="./images/京东云.svg" alt="">
|
||||
<img v-else-if="item.type == 'bd'" src="./images/百度智能云.svg" alt="">
|
||||
</span>
|
||||
<span class="description">{{ item.description }}</span>
|
||||
<!-- <span class="tags">123</span>-->
|
||||
</li>
|
||||
@ -468,13 +437,8 @@
|
||||
<span slot="footer" class="dialog-footer">
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-drawer
|
||||
direction="ltr"
|
||||
style="z-index: 1000;width: 1205px"
|
||||
title=""
|
||||
custom-class="myDrawer"
|
||||
:visible.sync="drawerPro"
|
||||
:with-header="false">
|
||||
<el-drawer direction="ltr" style="z-index: 1000;width: 1205px" title="" custom-class="myDrawer"
|
||||
:visible.sync="drawerPro" :with-header="false">
|
||||
<div style="width: 100%;height: 100%;background: white">
|
||||
<ul class="allProStyle">
|
||||
<li @click="goHomePage"><img src="./img/a.svg" alt=""> 阿里云</li>
|
||||
@ -1318,6 +1282,41 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
::v-deep .password-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.el-dialog {
|
||||
margin: 0 auto !important;
|
||||
position: relative;
|
||||
top: 0;
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
width: 70% !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 90% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.password-dialog-wrapper {
|
||||
::v-deep .el-dialog {
|
||||
margin-top: 0 !important;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.channel-dialog-style {
|
||||
position: relative;
|
||||
width: 700px;
|
||||
@ -1335,8 +1334,10 @@ export default {
|
||||
}
|
||||
|
||||
.indent {
|
||||
display: block; /* 将 span 元素转换为块级元素 */
|
||||
text-indent: 2em; /* 设置首行缩进的大小为 2 个字符 */
|
||||
display: block;
|
||||
/* 将 span 元素转换为块级元素 */
|
||||
text-indent: 2em;
|
||||
/* 设置首行缩进的大小为 2 个字符 */
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
@ -1650,6 +1651,7 @@ export default {
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hamburger-container {
|
||||
display: block;
|
||||
}
|
||||
@ -1667,7 +1669,8 @@ export default {
|
||||
border-bottom-color: #255fd5 !important;
|
||||
}
|
||||
|
||||
.searchUl, .searchEmpty {
|
||||
.searchUl,
|
||||
.searchEmpty {
|
||||
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
@ -1723,7 +1726,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.cuxiao-style {
|
||||
|
||||
@ -4,21 +4,27 @@
|
||||
<!-- <div style="color:#fff;height:30px;">1232</div> -->
|
||||
<!-- <el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<img src="../../../../public/logo
|
||||
s/logo_rgba/noWhite/kkyLogoNoWhiteNoText.png" alt="">
|
||||
<img src="../../../../public/logos/logo_rgba/noWhite/kkyLogoNoWhiteNoText.png" alt="">
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<img src="../../../../public/logos/logo_rgba/noWhite/kkyLogoNoWhiteText.png.png" alt="">
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- </div> -->
|
||||
<div :class="{ 'has-logo': showLogo }">
|
||||
<div :class="{ 'has-logo': showLogo }" class="sidebar-container">
|
||||
<logo @click="$router.push('/homePage/index')" v-if="showLogo" :collapse="isCollapse"/>
|
||||
<happy-scroll color="rgba(0,0,0,0.5)" size="5">
|
||||
<el-menu :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText"
|
||||
:unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false"
|
||||
:default-active="$route.path" mode="vertical"
|
||||
style="overflow-y: auto;height: 100vh ;"
|
||||
<!-- 将 happy-scroll 移到 el-menu 外层，并移除 el-menu 上的固定高度 -->
|
||||
<happy-scroll color="rgba(0,0,0,0.5)" size="5" class="menu-scroll-container">
|
||||
<el-menu
|
||||
:collapse="isCollapse"
|
||||
:background-color="variables.menuBg"
|
||||
:text-color="variables.menuText"
|
||||
:unique-opened="true"
|
||||
:active-text-color="variables.menuActiveText"
|
||||
:collapse-transition="false"
|
||||
:default-active="$route.path"
|
||||
mode="vertical"
|
||||
class="el-menu-vertical"
|
||||
>
|
||||
<sidebar-item v-for="(route, index) in permission_routes" :key="index" :item="route" :base-path="route.path"/>
|
||||
</el-menu>
|
||||
@ -30,7 +36,7 @@
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
import Logo from "./Logo";
|
||||
import SidebarItem from "./SidebarItem";
|
||||
import SidebarItem from "./SidebarItem.vue";
|
||||
import variables from "../../../styles/variables.scss";
|
||||
|
||||
export default {
|
||||
@ -41,17 +47,7 @@ export default {
|
||||
},
|
||||
components: {SidebarItem, Logo},
|
||||
computed: {
|
||||
|
||||
...mapGetters(["permission_routes", "sidebar"]),
|
||||
// activeMenu() {
|
||||
// const route = this.$route
|
||||
// const { meta, path } = route
|
||||
// // if set path, the sidebar will highlight the path you set
|
||||
// if (meta.activeMenu) {
|
||||
// return meta.activeMenu
|
||||
// }
|
||||
// return path
|
||||
// },
|
||||
showLogo() {
|
||||
return true
|
||||
},
|
||||
@ -69,25 +65,78 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/* stylelint-disable */
|
||||
.index {
|
||||
//margin-top: 50px;
|
||||
width: 100%; // 确保父容器宽度为100%
|
||||
height: 100%; // 占满父级高度
|
||||
position: relative; // 为内部绝对定位元素提供参考
|
||||
|
||||
.log {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
}
|
||||
height: 80px; // Logo区域高度
|
||||
flex-shrink: 0; // 防止在Flex布局中被压缩
|
||||
}
|
||||
|
||||
::v-deep .happy-scroll {
|
||||
overflow-x: hidden;
|
||||
.sidebar-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box; // 包含padding/border在width内计算
|
||||
}
|
||||
|
||||
.happy-scroll-container {
|
||||
width: 100% !important;
|
||||
.menu-scroll-container {
|
||||
flex: 1; // 占据剩余空间
|
||||
width: 100%;
|
||||
overflow-x: hidden; // 关键：隐藏水平滚动条
|
||||
|
||||
::v-deep .happy-scroll-container {
|
||||
width: 100% !important; // 强制容器宽度100%
|
||||
// 重要：移除可能由库添加的 min-width
|
||||
min-width: unset !important;
|
||||
|
||||
.happy-scroll-content {
|
||||
width: 100%;
|
||||
min-width: unset !important; // 确保内容区域也不设置最小宽度
|
||||
box-sizing: border-box; // 包含padding/border在width内计算
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-menu-vertical {
|
||||
border: none; // 移除默认边框
|
||||
height: 100%; // 撑满滚动容器
|
||||
width: 100% !important; // 关键：强制菜单宽度100%，匹配容器
|
||||
min-width: 100% !important; // 关键：强制最小宽度100%
|
||||
box-sizing: border-box; // 包含padding/border在width内计算
|
||||
|
||||
// 防止菜单项文字过长导致溢出
|
||||
.el-submenu__title,
|
||||
.el-menu-item {
|
||||
white-space: nowrap; // 防止文字换行
|
||||
overflow: hidden; // 隐藏溢出内容
|
||||
text-overflow: ellipsis; // 溢出时显示省略号
|
||||
}
|
||||
}
|
||||
|
||||
// 针对折叠状态的特殊处理
|
||||
::v-deep .el-menu--collapse {
|
||||
// Element UI 默认折叠宽度为 64px
|
||||
width: 64px !important; // 明确折叠宽度
|
||||
min-width: 64px !important;
|
||||
|
||||
// 确保折叠时子菜单项不溢出
|
||||
.el-submenu__title,
|
||||
.el-menu-item {
|
||||
text-overflow: clip; // 折叠时直接裁剪文字
|
||||
justify-content: center; // 图标居中
|
||||
}
|
||||
}
|
||||
}
|
||||
/* stylelint-enable */
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -51,11 +51,10 @@ import App from './App'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
// import 'default-passive-events'
|
||||
|
||||
import './icons' // icon
|
||||
import './permission' // permission control
|
||||
// import './utils/error-log' // error log
|
||||
|
||||
import index from '@/styles/index.css'
|
||||
import { v4 as uuidv4 } from 'uuid';//引入uuid
|
||||
// uuidv4();
|
||||
|
||||
|
||||
@ -1554,8 +1554,6 @@ export const asyncRoutes = [
|
||||
// fullPath: "/operation/approval/approveBusinessConfig"
|
||||
// }
|
||||
// },
|
||||
|
||||
|
||||
{
|
||||
path: "approvalConfig",
|
||||
component: () => import("@/views/operation/approval/approvalConfig"),
|
||||
|
||||
22
f/web-kboss/src/styles/index.css
Normal file
22
f/web-kboss/src/styles/index.css
Normal file
@ -0,0 +1,22 @@
|
||||
.backgroundColor{
|
||||
background-color: #fff;
|
||||
height: calc(100vh - 80px);
|
||||
padding: 10px;
|
||||
}
|
||||
.bf{
|
||||
background-color: #fff;
|
||||
}
|
||||
.p10{
|
||||
padding: 10px;
|
||||
}
|
||||
.h100{
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
.p0{
|
||||
padding: 0;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
// base color
|
||||
// / base color
|
||||
$blue: #324157;
|
||||
$light-blue: #3A71A8;
|
||||
$red: #C03639;
|
||||
@ -10,16 +10,18 @@ $panGreen: #30B08F;
|
||||
|
||||
// sidebar
|
||||
$menuText: #000;
|
||||
$menuActiveText: #1b14d9; //当前子菜单的字体颜色
|
||||
$subMenuActiveText: #100101; // https://github.com/ElemeFE/element/issues/12951
|
||||
$menuActiveText: #1b14d9; // 当前激活菜单项的文字颜色
|
||||
$subMenuActiveText: #100101; // 当前激活子菜单项的文字颜色
|
||||
|
||||
$menuBg: #fff; // 整体背景颜色
|
||||
$menuHover: #f7f7f7; //鼠标浮动一级菜单背景
|
||||
$menuHover: #f0f0f0; // 鼠标悬浮一级菜单背景色 (轻微变化更友好)
|
||||
$subMenuBg: #f7f7f7; // 子菜单背景色
|
||||
$subMenuHover: #eaeaea; // 鼠标悬浮子菜单背景色 (轻微变化更友好)
|
||||
|
||||
$subMenuBg: #f7f7f7; //子菜单下拉
|
||||
$subMenuHover: #0177f8; //鼠标浮动子菜单背景
|
||||
$sideBarWidth: 230px; // 侧边栏宽度
|
||||
|
||||
$sideBarWidth: 230px;
|
||||
// Element UI 默认折叠宽度为 64px
|
||||
// $sideBarCollapseWidth: 64px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
@ -32,5 +34,9 @@ $sideBarWidth: 230px;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
// sideBarCollapseWidth: $sideBarCollapseWidth;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="backgroundColor">
|
||||
|
||||
<qualificationBox :approveInfo="approveInfo"></qualificationBox>
|
||||
</div>
|
||||
@ -23,6 +23,4 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="backgroundColor">
|
||||
|
||||
<qualificationBox :approveInfo="approveInfo"></qualificationBox>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="leftTable">
|
||||
<div class="leftTable backgroundColor">
|
||||
<div class="findButtonMobile" v-if="isMobile">
|
||||
<el-row class="searchOne">
|
||||
<el-col :span="24" class="colOne">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="backgroundColor">
|
||||
<el-button size="small" style="margin-bottom: 5px;" type="primary" @click="getTableData('1')">
|
||||
<i class="el-icon-upload2"> </i>
|
||||
全部导出</el-button>
|
||||
|
||||
@ -7,36 +7,40 @@
|
||||
<el-table-column prop="orgname" label="客户名称"></el-table-column>
|
||||
<el-table-column label="联系方式" prop="contactor_phone"></el-table-column>
|
||||
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
|
||||
1
|
||||
</el-table>
|
||||
<div style="margin-top: 20px; display:flex;">
|
||||
<el-button @click="selectSales()" size="small" type="primary">选择销售</el-button>
|
||||
<el-button @click="cancelSelection()" size="small" type="primary">取消选择</el-button>
|
||||
<div class="button-container">
|
||||
<el-button @click="selectSales()" size="small" type="primary" :disabled="!hasSelection" class="action-button">
|
||||
选择销售
|
||||
</el-button>
|
||||
<el-button @click="cancelSelection()" size="small" type="primary" :disabled="!hasSelection"
|
||||
class="action-button">
|
||||
取消选择
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-dialog class="myDialog" title="选择销售人员" :visible.sync="isShow" width="30%" :before-close="handleClose">
|
||||
<el-form ref="form" :model="form" label-width="130px">
|
||||
<el-form-item label="请选择销售人员:" style="width: 80%;" prop="sales">
|
||||
<!-- 添加一个容器来应用滚动样式 -->
|
||||
<div class="radio-group-container">
|
||||
<el-radio-group v-model="form.id">
|
||||
<div class="radio">
|
||||
<el-radio :label="item.id" v-for="(item,index) in salesData" :key="index">{{ item.username }}</el-radio>
|
||||
<div class="radio" v-for="(item, index) in salesData" :key="index">
|
||||
<el-radio :label="item.id">{{ item.username }}</el-radio>
|
||||
</div>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer" style=" display:flex;">
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="cancel()">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="salesSubmit()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import {getNoinvitationcodeAPI, getSalesAPI, addUserCustomerAPI} from "@/api/sales/sales"
|
||||
import { getNoinvitationcodeAPI, getSalesAPI, addUserCustomerAPI } from "@/api/sales/sales";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -54,111 +58,160 @@ export default {
|
||||
children: "children",
|
||||
label: "username",
|
||||
},
|
||||
// salesId:'',//销售的id
|
||||
customerid: [], // 客户的id
|
||||
isSlected: false,
|
||||
hasSelection: false, // 新增：跟踪是否有选中项
|
||||
userId: sessionStorage.getItem("userId"),
|
||||
orgid: sessionStorage.getItem("orgid"),
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.loading = true
|
||||
this.getNoinvitationcode()
|
||||
this.loading = true;
|
||||
this.getNoinvitationcode();
|
||||
},
|
||||
methods: {
|
||||
getNoinvitationcode() { // 获取全部客户
|
||||
getNoinvitationcodeAPI({ orgid: this.orgid }).then(res => {
|
||||
|
||||
this.loading = false
|
||||
this.tableData = res.data.rows
|
||||
this.loading = false;
|
||||
this.tableData = res.data.rows;
|
||||
// console.log(res);
|
||||
})
|
||||
});
|
||||
},
|
||||
getSales() { // 展示所有销售人员
|
||||
getSalesAPI({ role: "销售", userid: this.userId }).then(res => {
|
||||
// console.log(res);
|
||||
if (res.data.length > 0) {
|
||||
this.salesData = res.data.map((item) => {
|
||||
let mySales = {
|
||||
return {
|
||||
username: item.username,
|
||||
id: item.id,
|
||||
};
|
||||
return mySales;
|
||||
});
|
||||
this.form.id = this.salesData.id
|
||||
// 注意：这里通常不需要设置默认选中第一个销售，
|
||||
// 因为用户需要主动选择。如果需要默认选中，可以取消注释下一行
|
||||
// this.form.id = this.salesData[0]?.id || '';
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
},
|
||||
selectSales() {
|
||||
this.getSales()
|
||||
this.isShow = true
|
||||
this.getSales();
|
||||
this.isShow = true;
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
// console.log(val);
|
||||
this.customerid = [];
|
||||
val.forEach(item => {
|
||||
this.customerid.push(item.id)
|
||||
})
|
||||
// console.log(this.customerid)
|
||||
// 更新选中的客户ID数组
|
||||
this.customerid = val.map(item => item.id); // 更简洁的写法
|
||||
// 更新是否有选中项的状态
|
||||
this.hasSelection = this.customerid.length > 0;
|
||||
// console.log(this.customerid);
|
||||
},
|
||||
cancelSelection() {
|
||||
this.$refs.table.clearSelection();
|
||||
// 清除选择后，确保按钮状态更新（虽然通常 clearSelection 会触发 handleSelectionChange）
|
||||
this.hasSelection = false;
|
||||
this.customerid = [];
|
||||
},
|
||||
handleClose() {
|
||||
this.isShow = false
|
||||
this.isShow = false;
|
||||
},
|
||||
salesSubmit() {
|
||||
let params = {
|
||||
customerid: this.customerid,//这个是数组
|
||||
salemanid: this.form.id//这个是字符串就行
|
||||
// 确保至少选择了一个客户和一个销售
|
||||
if (this.customerid.length === 0) {
|
||||
this.$message({
|
||||
message: '请至少选择一个客户!',
|
||||
type: 'warning'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!this.form.id) {
|
||||
this.$message({
|
||||
message: '请选择销售人员!',
|
||||
type: 'warning'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let formData = new FormData();
|
||||
// API 期望 customerid 是 JSON 字符串化的数组
|
||||
formData.append('customerid', JSON.stringify(this.customerid));
|
||||
formData.append('salemanid', this.form.id);
|
||||
// const fromdata = this.getFormData(params);
|
||||
|
||||
addUserCustomerAPI(formData).then(res => {
|
||||
if (res.status == true) {
|
||||
this.isShow = false
|
||||
this.getNoinvitationcode()
|
||||
this.isShow = false;
|
||||
this.getNoinvitationcode(); // 刷新客户列表
|
||||
// 清空选择状态
|
||||
this.$refs.table.clearSelection();
|
||||
this.hasSelection = false;
|
||||
this.customerid = [];
|
||||
this.form.id = ''; // 清空已选销售
|
||||
this.$message({
|
||||
message: '分配成功!',
|
||||
type: 'success'
|
||||
})
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.message || '分配失败!',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
})
|
||||
}).catch(error => {
|
||||
this.$message({
|
||||
message: '分配请求出错: ' + error.message,
|
||||
type: 'error'
|
||||
});
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.isShow = false
|
||||
this.isShow = false;
|
||||
},
|
||||
getFormData(object) {//转换参数为formdata格式
|
||||
const formData = new FormData();
|
||||
Object.keys(object).forEach(key => {
|
||||
const value = object[key];
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((subValue, i) => {
|
||||
formData.append(key + `[${i}]`, subValue)
|
||||
})
|
||||
} else {
|
||||
formData.append(key, object[key])
|
||||
}
|
||||
})
|
||||
return formData;
|
||||
},
|
||||
}
|
||||
// getFormData(object) { // 转换参数为formdata格式 - 当前未使用
|
||||
// const formData = new FormData();
|
||||
// Object.keys(object).forEach(key => {
|
||||
// const value = object[key];
|
||||
// if (Array.isArray(value)) {
|
||||
// value.forEach((subValue, i) => {
|
||||
// formData.append(key + `[${i}]`, subValue)
|
||||
// })
|
||||
// } else {
|
||||
// formData.append(key, object[key])
|
||||
// }
|
||||
// })
|
||||
// return formData;
|
||||
// },
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.myDialog {
|
||||
.radio {
|
||||
.button-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
gap: 10px; // 按钮之间的间距
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 8px 16px; // 增加按钮内边距
|
||||
font-size: 14px; // 调整字体大小
|
||||
border-radius: 4px; // 添加圆角
|
||||
}
|
||||
|
||||
.myDialog {
|
||||
.radio-group-container {
|
||||
// 为单选按钮组添加最大高度和滚动条
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e4e7ed; // 可选：添加边框
|
||||
border-radius: 4px; // 可选：添加圆角
|
||||
padding: 5px; // 可选：内部填充
|
||||
}
|
||||
|
||||
.radio {
|
||||
// 单选按钮项的样式（如果需要）
|
||||
margin-bottom: 5px; // 项之间的间距
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0; // 最后一项移除下边距
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="box backgroundColor">
|
||||
<div class="footer" style="background-color: white">
|
||||
<el-button size="small" type="success" @click="addSupp">添加供应商</el-button>
|
||||
</div>
|
||||
@ -8,43 +8,53 @@
|
||||
:row-key="getRowKeys" border @expand-change="expandChangeHandler" v-loading="loading">
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand" style="display: flex;flex-wrap: wrap">
|
||||
<el-form-item style="display: flex;justify-content: flex-start" label="供应商名称：">
|
||||
<span>{{ props.row.orgname }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: flex;justify-content: flex-start" label="起效日期：">
|
||||
<span>{{ props.row.start_date }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: flex;justify-content: flex-start" label="描述：">
|
||||
<span>{{ props.row.description }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: flex;justify-content: flex-start" label="失效日期：">
|
||||
<span>{{ props.row.end_date }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: flex;justify-content: flex-start" label="联系人电话：">
|
||||
<span>{{ props.row.contactor_phone }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: flex;justify-content: flex-start" label="协议修改：">
|
||||
<div class="details-container">
|
||||
<div class="details-header">
|
||||
<h3>供应商详细信息</h3>
|
||||
</div>
|
||||
<div class="details-content">
|
||||
<div class="details-row">
|
||||
<div class="details-item">
|
||||
<span class="details-label">供应商名称：</span>
|
||||
<span class="details-value">{{ props.row.orgname }}</span>
|
||||
</div>
|
||||
<div class="details-item">
|
||||
<span class="details-label">起效日期：</span>
|
||||
<span class="details-value">{{ props.row.start_date }}</span>
|
||||
</div>
|
||||
<div class="details-item">
|
||||
<span class="details-label">描述：</span>
|
||||
<span class="details-value">{{ props.row.description }}</span>
|
||||
</div>
|
||||
<div class="details-item">
|
||||
<span class="details-label">失效日期：</span>
|
||||
<span class="details-value">{{ props.row.end_date }}</span>
|
||||
</div>
|
||||
<div class="details-item">
|
||||
<span class="details-label">联系人电话：</span>
|
||||
<span class="details-value">{{ props.row.contactor_phone }}</span>
|
||||
</div>
|
||||
<div class="details-item">
|
||||
<span class="details-label">邮箱：</span>
|
||||
<span class="details-value">{{ props.row.emailaddress }}</span>
|
||||
</div>
|
||||
<div class="details-item">
|
||||
<span class="details-label">联系地址：</span>
|
||||
<span class="details-value">{{ props.row.address }}</span>
|
||||
</div>
|
||||
<div class="details-item">
|
||||
<span class="details-label">主营业务描述：</span>
|
||||
<span class="details-value">{{ props.row.main_business }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-actions">
|
||||
<el-button type="primary" @click="updateProtocol(props.row)" size="mini">修改协议</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: flex;justify-content: flex-start" label="邮箱：">
|
||||
<span>{{ props.row.emailaddress }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: flex;justify-content: flex-start" label="联系地址：">
|
||||
<span>{{ props.row.address }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: flex;justify-content: flex-start" label="主营业务描述：">
|
||||
<span>{{ props.row.main_business }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: flex;justify-content: flex-start" label="回佣设置："
|
||||
v-if="props.row.salemode == 1">
|
||||
<el-button type="primary" @click="rpRebateCtlDialogVisibleTrue(props.row)" size="mini">添加回佣
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: flex;justify-content: flex-start" label="产品导入:">
|
||||
<el-button type="primary" size="mini" @click="addProductExcel(props.row)">批量导入产品</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" @click="addProductExcel(props.row)" size="mini">批量导入产品</el-button>
|
||||
<el-button v-if="props.row.salemode == 1" type="primary" @click="rpRebateCtlDialogVisibleTrue(props.row)" size="mini">添加回佣</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-tabs type="border-card" @tab-click="handleClick" v-if="props.row.salemode == '1'">
|
||||
<el-tab-pane label="周结" name="first" v-if="oldRpRebate[0]">
|
||||
<el-table :data="oldRpRebate[0]" style="width: 100%">
|
||||
@ -264,7 +274,8 @@
|
||||
<el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
|
||||
:on-change="handleAvatarSuccess" :on-remove="handleRemove">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar"/>
|
||||
<i style="
|
||||
<!-- 修改：仅在没有图片时显示加号 -->
|
||||
<i v-else style="
|
||||
font-size: 60px;
|
||||
border: 1px solid #aaa;
|
||||
padding: 10px;
|
||||
@ -1119,6 +1130,8 @@ export default {
|
||||
},
|
||||
|
||||
handleRemove(file) { //图片展示⬇
|
||||
// 当图片被移除时，清空 imageUrl，这样加号会重新显示
|
||||
this.imageUrl = "";
|
||||
},
|
||||
handleAvatarSuccess(file, fileList) {
|
||||
this.imageUrl = URL.createObjectURL(file.raw);
|
||||
@ -1392,4 +1405,73 @@ export default {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 优化详情布局样式 */
|
||||
.details-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.details-header {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.details-header h3 {
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.details-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.details-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
|
||||
.details-item {
|
||||
flex: 0 0 50%;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.details-label {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
color: #909399;
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.details-value {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.details-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.details-item {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,93 +1,97 @@
|
||||
<template>
|
||||
<div class="mainBox">
|
||||
<div class="leftBox">
|
||||
<div class="section">
|
||||
<div class="bigTitle">快捷导航</div>
|
||||
<ul class="recUl">
|
||||
|
||||
<li v-for="(item,index) in navList" :key="index" @click="goBaidu(item)">{{ item.name }}</li>
|
||||
|
||||
<li v-for="(item,index) in navList" :key="index" @click="goBaidu(item)">
|
||||
<i :class="item.icon || 'el-icon-link'"></i>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="bigTitle">资源概览</div>
|
||||
<ul class="recUl overView">
|
||||
<li v-for="(item, index) in viewList" :key="index">
|
||||
<div class="overview-item">
|
||||
<span class="title">{{ item.name }}</span>
|
||||
<span class="number">{{ item.count }}</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="bigTitle">到期预警</div>
|
||||
<el-table
|
||||
height="250px"
|
||||
border
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="名称"
|
||||
width="180">
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table-header"
|
||||
cell-class-name="table-cell">
|
||||
<el-table-column prop="name" label="名称" width="180"></el-table-column>
|
||||
<el-table-column prop="instanceid" label="资源id" width="180"></el-table-column>
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === '即将到期' ? 'warning' : 'danger'">
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="instanceid"
|
||||
label="资源id"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="days"
|
||||
label="剩余天数">
|
||||
<el-table-column prop="days" label="剩余天数">
|
||||
<template slot-scope="scope">
|
||||
<span :class="scope.row.days < 3 ? 'critical' : ''">{{ scope.row.days }}天</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rightBox">
|
||||
<div class="user">
|
||||
<!-- 用户信息 -->
|
||||
<div class="user card">
|
||||
<div class="userImg">
|
||||
<div class="imgUser">{{ userInfo.username.charAt(0) }}</div>
|
||||
</div>
|
||||
<div class="userBox">
|
||||
<h3>{{ userInfo.username }}</h3>
|
||||
<div class="user-info">
|
||||
<p><i class="el-icon-user"></i> ID: {{ userInfo.id }}</p>
|
||||
<p><i class="el-icon-phone"></i> 手机号: {{ userInfo.mobile }}</p>
|
||||
<p><i class="el-icon-message"></i> 邮箱: {{ userInfo.email }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
<ul class="userUl">
|
||||
<li>
|
||||
<span>用户名：</span>
|
||||
<span class="content">{{ userInfo.username }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>ID：</span>
|
||||
<span class="content">{{ userInfo.id }}</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span>手机号：</span>
|
||||
<span class="content">{{ userInfo.mobile }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>邮箱：</span>
|
||||
<span class="content">{{ userInfo.email }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="false" class="price">
|
||||
<div class="price card">
|
||||
<div class="title">账户余额</div>
|
||||
<div class="content">
|
||||
<span>￥{{ initMybalance() }}</span>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="$router.push('/kbossCharge')">充值
|
||||
<span class="balance">￥{{ initMybalance() }}</span>
|
||||
<el-button size="mini" type="primary" @click="$router.push('/kbossCharge')">
|
||||
立即充值
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="announcements card">
|
||||
<div class="title">系统公告</div>
|
||||
<ul class="announcement-list">
|
||||
<li v-for="i in 3" :key="i">
|
||||
<i class="el-icon-bell"></i>
|
||||
<span>这是第{{ i }}条系统公告内容...</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import {mapGetters, mapState} from "vuex";
|
||||
import { mapState } from "vuex";
|
||||
import { reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav } from "@/api/newHome";
|
||||
|
||||
export default Vue.extend({
|
||||
@ -110,8 +114,7 @@ export default Vue.extend({
|
||||
reqQuickNav().then(res => {
|
||||
this.navList = res.data
|
||||
})
|
||||
this.userInfo = JSON.parse(JSON.parse(JSON.stringify(localStorage.getItem("user_info")) || "{}"));
|
||||
localStorage.setItem('price', this.mybalance)
|
||||
this.userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
|
||||
reqNewHomeResource().then(res => {
|
||||
if (res.status) {
|
||||
this.viewList = res.data || [];
|
||||
@ -129,8 +132,6 @@ export default Vue.extend({
|
||||
},
|
||||
methods: {
|
||||
goBaidu(item) {
|
||||
console.log(item.listUrl)
|
||||
console.log(item.url)
|
||||
this.$store.commit('setRedirectUrl', item.url)
|
||||
localStorage.setItem('redirectUrl', item.url)
|
||||
localStorage.setItem('userRescourseUrl', item.listUrl)
|
||||
@ -143,174 +144,231 @@ export default Vue.extend({
|
||||
})
|
||||
},
|
||||
initMybalance() {
|
||||
return sessionStorage.getItem('mybalance')
|
||||
return sessionStorage.getItem('mybalance') || '0.00'
|
||||
},
|
||||
}, computed: {
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
mybalance: state => state.user.mybalance,
|
||||
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="less" scoped>
|
||||
.mainBox {
|
||||
background: #f6f6f6;
|
||||
background: #f5f7fa;
|
||||
width: 100%;
|
||||
height: calc(100vh - 80px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.leftBox {
|
||||
padding-left: 15px;
|
||||
width: 60%;
|
||||
width: 65%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.section {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.rightBox {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.recUl {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 15px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-right: 5px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 10px;
|
||||
width: 24%;
|
||||
padding: 15px 30px;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease-in-out;
|
||||
border: 2px solid #f1ebeb;
|
||||
background: white;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #171b4a;
|
||||
background: #d1caca;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overView {
|
||||
li {
|
||||
border-radius: 0 !important;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
&:hover {
|
||||
li {
|
||||
cursor: default;
|
||||
background: white !important;
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
border-color: #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
.overview-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 10px;
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 18px;
|
||||
color: #0e0b0b;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rightBox {
|
||||
width: 40%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.bigTitle {
|
||||
color: #4c5a7e;
|
||||
margin: 15px 0;
|
||||
font-size: 20px;
|
||||
color: #303133;
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: white;
|
||||
height: 300px;
|
||||
border-radius: 4px;
|
||||
|
||||
.rightBox {
|
||||
|
||||
padding: 40px;
|
||||
padding-left: 0;
|
||||
width: calc(100% - 150px);
|
||||
|
||||
.userUl {
|
||||
li {
|
||||
margin-bottom: 35px;
|
||||
font-size: 18px;
|
||||
|
||||
.content {
|
||||
color: #78787c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userImg {
|
||||
margin-right: 20px;
|
||||
|
||||
width: 150px;
|
||||
// height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
.imgUser {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #409eff, #64b5f6);
|
||||
font-size: 36px;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.userBox {
|
||||
width: calc(100% - 100px);
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
p {
|
||||
margin: 8px 0;
|
||||
color: #606266;
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
|
||||
.content {
|
||||
margin-top: 15px;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
.balance {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #4c5a7e;
|
||||
|
||||
|
||||
color: #e6a23c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chargeStyle {
|
||||
padding: 5px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
.announcements {
|
||||
.announcement-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #e6a23c;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.critical {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
color: #4c5a7e;
|
||||
|
||||
}
|
||||
|
||||
.imgUser {
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: #081020;
|
||||
font-size: 48px;
|
||||
color: white;
|
||||
.table-header {
|
||||
background-color: #f5f7fa !important;
|
||||
color: #606266;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
padding: 8px 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -23,7 +23,8 @@
|
||||
<div class="configStyle">
|
||||
<span>数据盘：3.84T U.2 NVMe SSD * 1</span>
|
||||
<span>GPU：NVIDIA GeForce RTX 4090 * 8</span>
|
||||
<span>光速网卡：Mellanox ConnectX-5 Lx 25G SFP28 2-port</span></div>
|
||||
<span>光速网卡：Mellanox ConnectX-5 Lx 25G SFP28 2-port</span>
|
||||
</div>
|
||||
<div class="butBox">
|
||||
<span class="buyBtn" @click="dialogVisibleMy = true"> 立即购买</span>
|
||||
</div>
|
||||
@ -53,10 +54,10 @@
|
||||
<div class="dsPcPad">
|
||||
<span class="hmc1icon" style="position: relative;height: 150px">
|
||||
<div class="aniIcon"
|
||||
style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_2.png'); background-position-y: 0;position: absolute;top: 0;left: -20px"></div>
|
||||
style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_2.png'); background-position-y: 0;position: absolute;top: 0;left: -20px">
|
||||
</div>
|
||||
<div class="hmc3nico"><img height="180"
|
||||
src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_2.png"
|
||||
width="180"></div>
|
||||
src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_2.png" width="180"></div>
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="dsPhone">-->
|
||||
@ -74,20 +75,17 @@
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li :class="{ activeTagStyle: currentTag === '1' }" style="width: 250px;"
|
||||
@click=" clickTag('1') ">
|
||||
<li :class="{ activeTagStyle: currentTag === '1' }" style="width: 250px;" @click=" clickTag('1')">
|
||||
<a class="hmc1a aniIconBtn">
|
||||
<div class="dsPcPad">
|
||||
<span class="hmc1icon"
|
||||
style="position: relative;height: 150px">
|
||||
<span class="hmc1icon" style="position: relative;height: 150px">
|
||||
<div class="aniIcon"
|
||||
|
||||
style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_1.png'); background-position-y: 0;position: absolute;top: 0;left: -20px"></div>
|
||||
style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_1.png'); background-position-y: 0;position: absolute;top: 0;left: -20px">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="hmc3nico"><img height="180"
|
||||
src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_1.png"
|
||||
width="180"></div>
|
||||
src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_1.png" width="180"></div>
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="dsPhone">-->
|
||||
@ -111,12 +109,12 @@
|
||||
<div class="dsPcPad">
|
||||
<span class="hmc1icon" style="position: relative;height: 150px">
|
||||
<div class="aniIcon"
|
||||
style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_3.png'); background-position-y: 0;position: absolute;top: 0;left: -20px"></div>
|
||||
style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_3.png'); background-position-y: 0;position: absolute;top: 0;left: -20px">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="hmc3nico"><img height="180"
|
||||
src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_3.png"
|
||||
width="180"></div>
|
||||
src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_3.png" width="180"></div>
|
||||
</span>
|
||||
</div>
|
||||
<strong style="margin-top:25px">公有云</strong>
|
||||
@ -145,9 +143,8 @@
|
||||
</div>
|
||||
<div class="new-nav">
|
||||
<ul class="nav-ul">
|
||||
<li
|
||||
:class="{ navLi: item.name === currentTitle }"
|
||||
@click="mouseOver($event,item)" v-for="(item,index) in menuArr" :key="item.name">
|
||||
<li :class="{ navLi: item.name === currentTitle }" @click="mouseOver($event, item)"
|
||||
v-for="(item, index) in menuArr" :key="item.name">
|
||||
<div>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
@ -168,16 +165,17 @@
|
||||
<div class="content-r">
|
||||
|
||||
|
||||
<ul class="bottom-ul" style="display: flex;flex-wrap: wrap;justify-content: center;"
|
||||
>
|
||||
<ul class="bottom-ul" style="display: flex;flex-wrap: wrap;justify-content: center;">
|
||||
<li @click="goTwo(item)" v-for="(item, index) in currentData" :key="index"
|
||||
style="width: 300px;margin: 0 15px 10px 15px">
|
||||
<a class="sq6Wd6jr">
|
||||
<div class="__9uUkOV59"><h3><span class="LLZ9Q8FX">{{ item.product_name }} </span></h3>
|
||||
<p class="xQ1YIHP8">{{ item.description }}</p></div>
|
||||
<div class="__9uUkOV59">
|
||||
<h3><span class="LLZ9Q8FX">{{ item.product_name }} </span></h3>
|
||||
<p class="xQ1YIHP8">{{ item.description }}</p>
|
||||
</div>
|
||||
<div class="PfF8K5ib">
|
||||
<div v-for="(itemOne,index) in JSON.parse(JSON.stringify(item.tags))" :key="index"
|
||||
class="_dDwK_qk"><span>{{
|
||||
<div v-for="(itemOne, index) in JSON.parse(JSON.stringify(item.tags))" :key="index" class="_dDwK_qk">
|
||||
<span>{{
|
||||
itemOne
|
||||
}}</span>
|
||||
</div>
|
||||
@ -186,8 +184,7 @@
|
||||
style="display: flex;justify-content: flex-start;align-items: center">
|
||||
<span class="__1wQVatn_ vh___DYU PEZeG2zA"
|
||||
style="display: inline-block;align-self: flex-end">折扣</span>
|
||||
<span class="__1wQVatn_ cB_ePAPu XeaRmkQC"
|
||||
style="display:inline-block;margin: 0 3px">{{
|
||||
<span class="__1wQVatn_ cB_ePAPu XeaRmkQC" style="display:inline-block;margin: 0 3px">{{
|
||||
item.discount
|
||||
}} </span>
|
||||
<span class="__1wQVatn_ cB_ePAPu XeaRmkQC"
|
||||
@ -1054,9 +1051,7 @@ export default {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.all-cloud {
|
||||
|
||||
}
|
||||
.all-cloud {}
|
||||
|
||||
.cloud-header {
|
||||
display: flex;
|
||||
@ -1070,9 +1065,7 @@ export default {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.jd-box {
|
||||
|
||||
}
|
||||
.jd-box {}
|
||||
|
||||
.all-cloud-item {
|
||||
display: flex;
|
||||
@ -1163,20 +1156,23 @@ export default {
|
||||
.new-nav {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.main-box {
|
||||
|
||||
}
|
||||
.main-box {}
|
||||
|
||||
.cloud-header {
|
||||
margin: 0 0 15px 0 !important;
|
||||
}
|
||||
|
||||
.mobile-banner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.all-cloud-item {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.other-product-ul {
|
||||
|
||||
li {
|
||||
@ -1257,6 +1253,7 @@ export default {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
z-index: 1;
|
||||
|
||||
//padding: 10px 0 0 10px;
|
||||
&:first-child {
|
||||
height: 60px;
|
||||
@ -1327,7 +1324,8 @@ export default {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2; /* 控制最大行数 */
|
||||
-webkit-line-clamp: 2;
|
||||
/* 控制最大行数 */
|
||||
}
|
||||
|
||||
* {
|
||||
@ -1444,6 +1442,7 @@ a:hover {
|
||||
.myDivider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.new-nav {
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
@ -1467,9 +1466,12 @@ a:hover {
|
||||
|
||||
padding: 0 10px;
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr 1fr !important; /* 两列等宽 */
|
||||
grid-template-columns: 1fr 1fr !important;
|
||||
/* 两列等宽 */
|
||||
//justify-content: space-around !important;
|
||||
gap: 10px; /* 上下左右间距 */
|
||||
gap: 10px;
|
||||
|
||||
/* 上下左右间距 */
|
||||
li {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user