yumoqing/kboss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: yumoqing:ef10dfdd697ebeb6ba2d1ed6f2d9e55d48d7154f
Branches Tags
yumoqing:main
yumoqing:prod
yumoqing:dev1
..
compare: yumoqing:cbc37862fd0a8822c1a503f23d05b5348f5d6641
Branches Tags
yumoqing:prod
yumoqing:main
yumoqing:dev1

No commits in common. "ef10dfdd697ebeb6ba2d1ed6f2d9e55d48d7154f" and "cbc37862fd0a8822c1a503f23d05b5348f5d6641" have entirely different histories.
ef10dfdd69 ... cbc37862fd

15 changed files with 650 additions and 919 deletions
Show Stats Expand all files Collapse all files

144
f/web-kboss/src/layout/components/Navbar.vue
View File

@ -1,15 +1,23 @@
<template> <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"> <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> <span style="color: #423f3f;font-size: 20px;margin-left: 15px">平台充值中心</span>
</div> </div>
<!-- v-show="!role.includes('客户')" --> <!-- v-show="!role.includes('客户')" -->
<!-- v-if="!isShowKbossCharge&&!role.includes('客户')||isMobileScreen"--> <!-- v-if="!isShowKbossCharge&&!role.includes('客户')||isMobileScreen"-->
<hamburger v-if="false" style="display: flex;justify-content: center;align-items: center;color: white!important;" <hamburger
id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
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%;" <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" <div class="right-menu"
style="display:flex;justify-content: center!important;align-items: center!important;margin-right: 10px;"> 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;"> <template style="justify-content: center;align-items: center;transform: translate(0,-30px)!important;">
@ -24,7 +32,8 @@
<el-tooltip v-if="role.includes('客户')" class="item" effect="dark" content="查询产品" placement="bottom"> <el-tooltip v-if="role.includes('客户')" class="item" effect="dark" content="查询产品" placement="bottom">
<span class="right-menu-item hover-effect" <span class="right-menu-item hover-effect"
style="font-size: 26px;display: flex;justify-content: center;align-items: center"> 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> </span>
</el-tooltip> </el-tooltip>
<!-- <el-tooltip class="item " effect="dark" content="购物车" placement="bottom" v-if="org_type==2||org_type==3">--> <!-- <el-tooltip class="item " effect="dark" content="购物车" placement="bottom" v-if="org_type==2||org_type==3">-->
@ -49,7 +58,8 @@
<el-tooltip v-if="!role.includes('客户')" class="item" effect="dark" content="可视化大屏" placement="bottom"> <el-tooltip v-if="!role.includes('客户')" class="item" effect="dark" content="可视化大屏" placement="bottom">
<span class="right-menu-item hover-effect" <span class="right-menu-item hover-effect"
style="font-size: 26px;display: flex;justify-content: center;align-items: center"> 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> </span>
</el-tooltip> </el-tooltip>
@ -59,7 +69,8 @@
</template> </template>
<!-- <el-tooltip class="item" effect="dark" content="操作" placement="bottom"> --> <!-- <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" <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"> <div class="avatar-wrapper">
<!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> --> <!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> -->
<i <i
@ -73,17 +84,26 @@
<!-- <div class="block"><el-avatar shape="square" size=small :src="squareUrl"></el-avatar></div> --> <!-- <div class="block"><el-avatar shape="square" size=small :src="squareUrl"></el-avatar></div> -->
</div> </div>
<el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided> <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-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
<span ref="contentToCopy"> style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID: <span
ref="contentToCopy">
{{ {{
userId userId
}} }}
</span> </span>
<svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" <svg
width="12" height="12" style="fill: #1019ab;"> @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 <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" 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> p-id="1521"></path>
@ -91,11 +111,12 @@
</span> </span>
</div> </div>
<el-divider style="margin: 0!important;"></el-divider> <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"> 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 <span style="color:#666;display: block;font-size: 14px;"
style="display: block;margin-bottom: 5px">余额</span>{{ class="moneyNow"><span style="display: block;margin-bottom: 5px">余额</span>{{
mybalance ? mybalance : initMybalance() mybalance ? mybalance : initMybalance()
}} ￥</span> }} ￥</span>
<el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain <el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
@ -103,7 +124,8 @@
充值 充值
</el-button> </el-button>
</div> </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> <span style="display: block">个人中心</span>
</el-dropdown-item> </el-dropdown-item>
<!-- channelManagementShow=true--> <!-- channelManagementShow=true-->
@ -182,8 +204,8 @@
<el-button size="mini" type="danger" @click="delMessage">删除</el-button> <el-button size="mini" type="danger" @click="delMessage">删除</el-button>
</div> </div>
<el-table :header-cell-style="rowClass" @row-click="expandChangeHandler1" class="table" ref="table" <el-table :header-cell-style="rowClass" @row-click="expandChangeHandler1" class="table" ref="table"
@expand-change="expandChangeHandler" :row-class-name="rowStyle" :data="unreadMessageList" height="680" @expand-change="expandChangeHandler" :row-class-name="rowStyle" :data="unreadMessageList"
tooltip-effect="dark" @selection-change="handleSelectionChange"> height="680" tooltip-effect="dark" @selection-change="handleSelectionChange">
<el-table-column type="expand" width="30px"> <el-table-column type="expand" width="30px">
<template slot-scope="props"> <template slot-scope="props">
<div class="msgtext"> <div class="msgtext">
@ -313,7 +335,7 @@
<!-- 修改密码弹窗 --> <!-- 修改密码弹窗 -->
<el-dialog title="修改密码 " :visible.sync="passwordDialog" width="45%" :before-close="handleClose1" <el-dialog title="修改密码 " :visible.sync="passwordDialog" width="45%" :before-close="handleClose1"
custom-class="password-dialog" class="password-dialog-wrapper"> style="width: 80%">
<el-form ref="passwordForm" :model="passwordForm" label-width="120px" style="width: 80%" :rules="rules"> <el-form ref="passwordForm" :model="passwordForm" label-width="120px" style="width: 80%" :rules="rules">
<el-form-item label="旧密码:" prop="password"> <el-form-item label="旧密码:" prop="password">
<el-input v-model="passwordForm.password" placeholder="请输入旧密码" show-password></el-input> <el-input v-model="passwordForm.password" placeholder="请输入旧密码" show-password></el-input>
@ -403,9 +425,11 @@
</el-dialog> </el-dialog>
<!-- 渠道管理--> <!-- 渠道管理-->
<el-dialog title="渠道管理信息提示" :visible.sync="channelManagementShow" custom-class="channel-dialog-style"> <el-dialog
<span title="渠道管理信息提示"
class="indent">开元云公司作为一级分销商面对直接客户，售出设备产品。产品由供应商上传平台，设置产品价格配置，及设备账号密码等配置信息，开元云进行审核，审核通过产品上线，客户可直接购买。开元云可以将产品分配给各供应商销售，分配时配置给供应商的折扣，供应商得到产品及开元云的折扣后，设置折扣面向客户，客户通过kboss进行购买，分销商的客户如自己上传产品，也可以成为开元云的供应商。</span> :visible.sync="channelManagementShow"
custom-class="channel-dialog-style">
<span class="indent">开元云公司作为一级分销商面对直接客户，售出设备产品。产品由供应商上传平台，设置产品价格配置，及设备账号密码等配置信息，开元云进行审核，审核通过产品上线，客户可直接购买。开元云可以将产品分配给各供应商销售，分配时配置给供应商的折扣，供应商得到产品及开元云的折扣后，设置折扣面向客户，客户通过kboss进行购买，分销商的客户如自己上传产品，也可以成为开元云的供应商。</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="channelManagementShow = false">取 消</el-button> <el-button @click="channelManagementShow = false">取 消</el-button>
<el-button type="primary" @click="ChannelConfirmBtn">我已知晓，并进行后续操作</el-button> <el-button type="primary" @click="ChannelConfirmBtn">我已知晓，并进行后续操作</el-button>
@ -414,7 +438,11 @@
<!-- searhcDiaolog--> <!-- 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"> :before-close="handleClose">
<el-input placeholder="请输入搜索关键字" v-model="searchValue" class="input-with-select"> <el-input placeholder="请输入搜索关键字" v-model="searchValue" class="input-with-select">
<el-button @click="searchBtn" :loading="searchLoading" slot="append" icon="el-icon-search"></el-button> <el-button @click="searchBtn" :loading="searchLoading" slot="append" icon="el-icon-search"></el-button>
@ -422,11 +450,14 @@
<ul v-loading="searchLoading" class="searchUl" v-if="searchResultList.length>0"> <ul v-loading="searchLoading" class="searchUl" v-if="searchResultList.length>0">
<li v-for="(item,index) in searchResultList" :key="index"> <li v-for="(item,index) in searchResultList" :key="index">
<span class="title" @click="goProductPage(item)"> <span class="title" @click="goProductPage(item)"><div style="margin-right: 5px">{{ item.product_name }}</div> <img
<div style="margin-right: 5px">{{ item.product_name }}</div> <img v-if="item.type == 'jd'" v-if="item.type=='jd'"
src="./images/京东云.svg" alt=""> src="./images/京东云.svg"
<img v-else-if="item.type == 'bd'" src="./images/百度智能云.svg" alt=""> alt="">
</span> <img
v-else-if="item.type=='bd'"
src="./images/百度智能云.svg"
alt=""></span>
<span class="description">{{ item.description }}</span> <span class="description">{{ item.description }}</span>
<!-- <span class="tags">123</span>--> <!-- <span class="tags">123</span>-->
</li> </li>
@ -437,8 +468,13 @@
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
</span> </span>
</el-dialog> </el-dialog>
<el-drawer direction="ltr" style="z-index: 1000;width: 1205px" title="" custom-class="myDrawer" <el-drawer
:visible.sync="drawerPro" :with-header="false"> 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"> <div style="width: 100%;height: 100%;background: white">
<ul class="allProStyle"> <ul class="allProStyle">
<li @click="goHomePage"><img src="./img/a.svg" alt=""> 阿里云</li> <li @click="goHomePage"><img src="./img/a.svg" alt=""> 阿里云</li>
@ -1282,41 +1318,6 @@ export default {
}; };
</script> </script>
<style lang="less"> <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 { .channel-dialog-style {
position: relative; position: relative;
width: 700px; width: 700px;
@ -1334,10 +1335,8 @@ export default {
} }
.indent { .indent {
display: block; display: block; /* 将 span 元素转换为块级元素 */
/* 将 span 元素转换为块级元素 */ text-indent: 2em; /* 设置首行缩进的大小为 2 个字符 */
text-indent: 2em;
/* 设置首行缩进的大小为 2 个字符 */
line-height: 25px; line-height: 25px;
} }
@ -1651,7 +1650,6 @@ export default {
.logo { .logo {
display: none; display: none;
} }
.hamburger-container { .hamburger-container {
display: block; display: block;
} }
@ -1669,8 +1667,7 @@ export default {
border-bottom-color: #255fd5 !important; border-bottom-color: #255fd5 !important;
} }
.searchUl, .searchUl, .searchEmpty {
.searchEmpty {
height: 250px; height: 250px;
width: 100%; width: 100%;
@ -1726,6 +1723,7 @@ export default {
} }
} }
} }
</style> </style>
<style> <style>
.cuxiao-style { .cuxiao-style {

99
f/web-kboss/src/layout/components/Sidebar/index.vue
View File

@ -4,27 +4,21 @@
<!-- <div style="color:#fff;height:30px;">1232</div> --> <!-- <div style="color:#fff;height:30px;">1232</div> -->
<!-- <el-row :gutter="20"> <!-- <el-row :gutter="20">
<el-col :span="6"> <el-col :span="6">
<img src="../../../../public/logos/logo_rgba/noWhite/kkyLogoNoWhiteNoText.png" alt=""> <img src="../../../../public/logo
s/logo_rgba/noWhite/kkyLogoNoWhiteNoText.png" alt="">
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<img src="../../../../public/logos/logo_rgba/noWhite/kkyLogoNoWhiteText.png.png" alt=""> <img src="../../../../public/logos/logo_rgba/noWhite/kkyLogoNoWhiteText.png.png" alt="">
</el-col> </el-col>
</el-row> --> </el-row> -->
<!-- </div> --> <!-- </div> -->
<div :class="{ 'has-logo': showLogo }" class="sidebar-container"> <div :class="{ 'has-logo': showLogo }">
<logo @click="$router.push('/homePage/index')" v-if="showLogo" :collapse="isCollapse"/> <logo @click="$router.push('/homePage/index')" v-if="showLogo" :collapse="isCollapse"/>
<!-- 将 happy-scroll 移到 el-menu 外层，并移除 el-menu 上的固定高度 --> <happy-scroll color="rgba(0,0,0,0.5)" size="5">
<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"
<el-menu :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false"
:collapse="isCollapse" :default-active="$route.path" mode="vertical"
:background-color="variables.menuBg" style="overflow-y: auto;height: 100vh ;"
: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"/> <sidebar-item v-for="(route, index) in permission_routes" :key="index" :item="route" :base-path="route.path"/>
</el-menu> </el-menu>
@ -36,7 +30,7 @@
<script> <script>
import {mapGetters} from "vuex"; import {mapGetters} from "vuex";
import Logo from "./Logo"; import Logo from "./Logo";
import SidebarItem from "./SidebarItem.vue"; import SidebarItem from "./SidebarItem";
import variables from "../../../styles/variables.scss"; import variables from "../../../styles/variables.scss";
export default { export default {
@ -47,7 +41,17 @@ export default {
}, },
components: {SidebarItem, Logo}, components: {SidebarItem, Logo},
computed: { computed: {
...mapGetters(["permission_routes", "sidebar"]), ...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() { showLogo() {
return true return true
}, },
@ -65,78 +69,25 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* stylelint-disable */
.index { .index {
//margin-top: 50px; //margin-top: 50px;
width: 100%; // 确保父容器宽度为100%
height: 100%; // 占满父级高度
position: relative; // 为内部绝对定位元素提供参考
.log { .log {
width: 100%; width: 100%;
height: 80px; // Logo区域高度 height: 80px;
flex-shrink: 0; // 防止在Flex布局中被压缩 }
} }
.sidebar-container { ::v-deep .happy-scroll {
width: 100%; overflow-x: hidden;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box; // 包含padding/border在width内计算
}
.menu-scroll-container { .happy-scroll-container {
flex: 1; // 占据剩余空间 width: 100% !important;
width: 100%;
overflow-x: hidden; // 关键：隐藏水平滚动条
::v-deep .happy-scroll-container {
width: 100% !important; // 强制容器宽度100%
// 重要：移除可能由库添加的 min-width
min-width: unset !important;
.happy-scroll-content { .happy-scroll-content {
width: 100%; 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> </style>

3
f/web-kboss/src/main.js
View File

@ -51,10 +51,11 @@ import App from './App'
import store from './store' import store from './store'
import router from './router' import router from './router'
// import 'default-passive-events' // import 'default-passive-events'
import './icons' // icon import './icons' // icon
import './permission' // permission control import './permission' // permission control
// import './utils/error-log' // error log // import './utils/error-log' // error log
import index from '@/styles/index.css'
import { v4 as uuidv4 } from 'uuid';//引入uuid import { v4 as uuidv4 } from 'uuid';//引入uuid
// uuidv4(); // uuidv4();

2
f/web-kboss/src/router/index.js
View File

@ -1554,6 +1554,8 @@ export const asyncRoutes = [
// fullPath: "/operation/approval/approveBusinessConfig" // fullPath: "/operation/approval/approveBusinessConfig"
// } // }
// }, // },
{ {
path: "approvalConfig", path: "approvalConfig",
component: () => import("@/views/operation/approval/approvalConfig"), component: () => import("@/views/operation/approval/approvalConfig"),

22
f/web-kboss/src/styles/index.css
View File

@ -1,22 +0,0 @@
.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;
}

20
f/web-kboss/src/styles/variables.scss
View File

@ -1,4 +1,4 @@
// / base color // base color
$blue: #324157; $blue: #324157;
$light-blue: #3A71A8; $light-blue: #3A71A8;
$red: #C03639; $red: #C03639;
@ -10,18 +10,16 @@ $panGreen: #30B08F;
// sidebar // sidebar
$menuText: #000; $menuText: #000;
$menuActiveText: #1b14d9; // 当前激活菜单项的文字颜色 $menuActiveText: #1b14d9; //当前子菜单的字体颜色
$subMenuActiveText: #100101; // 当前激活子菜单项的文字颜色 $subMenuActiveText: #100101; // https://github.com/ElemeFE/element/issues/12951
$menuBg: #fff; //整体背景颜色 $menuBg: #fff; //整体背景颜色
$menuHover: #f0f0f0; // 鼠标悬浮一级菜单背景色 (轻微变化更友好) $menuHover: #f7f7f7; //鼠标浮动一级菜单背景
$subMenuBg: #f7f7f7; // 子菜单背景色
$subMenuHover: #eaeaea; // 鼠标悬浮子菜单背景色 (轻微变化更友好)
$sideBarWidth: 230px; // 侧边栏宽度 $subMenuBg: #f7f7f7; //子菜单下拉
$subMenuHover: #0177f8; //鼠标浮动子菜单背景
// Element UI 默认折叠宽度为 64px $sideBarWidth: 230px;
// $sideBarCollapseWidth: 64px;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
@ -34,9 +32,5 @@ $sideBarWidth: 230px; // 侧边栏宽度
subMenuBg: $subMenuBg; subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover; subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth; sideBarWidth: $sideBarWidth;
// sideBarCollapseWidth: $sideBarCollapseWidth;
} }

6
f/web-kboss/src/views/customer/qualificationReview/apprvedInfo/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="backgroundColor"> <div>
<qualificationBox :approveInfo="approveInfo"></qualificationBox> <qualificationBox :approveInfo="approveInfo"></qualificationBox>
</div> </div>
@ -23,4 +23,6 @@ export default {
}, },
} }
</script> </script>
<style scoped></style> <style scoped>
</style>

2
f/web-kboss/src/views/customer/qualificationReview/noApproveInfo/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="backgroundColor"> <div>
<qualificationBox :approveInfo="approveInfo"></qualificationBox> <qualificationBox :approveInfo="approveInfo"></qualificationBox>
</div> </div>

2
f/web-kboss/src/views/customer/rechargeRecord/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="leftTable backgroundColor"> <div class="leftTable">
<div class="findButtonMobile" v-if="isMobile"> <div class="findButtonMobile" v-if="isMobile">
<el-row class="searchOne"> <el-row class="searchOne">
<el-col :span="24" class="colOne"> <el-col :span="24" class="colOne">

2
f/web-kboss/src/views/operation/consultingMangement/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="backgroundColor"> <div>
<el-button size="small" style="margin-bottom: 5px;" type="primary" @click="getTableData('1')"> <el-button size="small" style="margin-bottom: 5px;" type="primary" @click="getTableData('1')">
<i class="el-icon-upload2"> </i> <i class="el-icon-upload2"> </i>
全部导出</el-button> 全部导出</el-button>

181
f/web-kboss/src/views/operation/publicCostomerManagement/index.vue
View File

@ -7,40 +7,36 @@
<el-table-column prop="orgname" label="客户名称"></el-table-column> <el-table-column prop="orgname" label="客户名称"></el-table-column>
<el-table-column label="联系方式" prop="contactor_phone"></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> <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
1
</el-table> </el-table>
<div class="button-container"> <div style="margin-top: 20px; display:flex;">
<el-button @click="selectSales()" size="small" type="primary" :disabled="!hasSelection" class="action-button"> <el-button @click="selectSales()" size="small" type="primary">选择销售</el-button>
选择销售 <el-button @click="cancelSelection()" size="small" type="primary">取消选择</el-button>
</el-button>
<el-button @click="cancelSelection()" size="small" type="primary" :disabled="!hasSelection"
class="action-button">
取消选择
</el-button>
</div> </div>
</el-card> </el-card>
<el-dialog class="myDialog" title="选择销售人员" :visible.sync="isShow" width="30%" :before-close="handleClose"> <el-dialog class="myDialog" title="选择销售人员" :visible.sync="isShow" width="30%" :before-close="handleClose">
<el-form ref="form" :model="form" label-width="130px"> <el-form ref="form" :model="form" label-width="130px">
<el-form-item label="请选择销售人员:" style="width: 80%;" prop="sales"> <el-form-item label="请选择销售人员:" style="width: 80%;" prop="sales">
<!-- 添加一个容器来应用滚动样式 -->
<div class="radio-group-container">
<el-radio-group v-model="form.id"> <el-radio-group v-model="form.id">
<div class="radio" v-for="(item, index) in salesData" :key="index"> <div class="radio">
<el-radio :label="item.id">{{ item.username }}</el-radio> <el-radio :label="item.id" v-for="(item,index) in salesData" :key="index">{{ item.username }}</el-radio>
</div> </div>
</el-radio-group> </el-radio-group>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer" style=" display:flex;">
<el-button size="small" @click="cancel()">取 消</el-button> <el-button size="small" @click="cancel()">取 消</el-button>
<el-button size="small" type="primary" @click="salesSubmit()">确 定</el-button> <el-button size="small" type="primary" @click="salesSubmit()">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { getNoinvitationcodeAPI, getSalesAPI, addUserCustomerAPI } from "@/api/sales/sales"; import {getNoinvitationcodeAPI, getSalesAPI, addUserCustomerAPI} from "@/api/sales/sales"
export default { export default {
data() { data() {
@ -58,160 +54,111 @@ export default {
children: "children", children: "children",
label: "username", label: "username",
}, },
// salesId:'',//销售的id
customerid: [],//客户的id customerid: [],//客户的id
hasSelection: false, // 新增：跟踪是否有选中项 isSlected: false,
userId: sessionStorage.getItem("userId"), userId: sessionStorage.getItem("userId"),
orgid: sessionStorage.getItem("orgid"), orgid: sessionStorage.getItem("orgid"),
}; }
}, },
created() { created() {
this.loading = true; this.loading = true
this.getNoinvitationcode(); this.getNoinvitationcode()
}, },
methods: { methods: {
getNoinvitationcode() {//获取全部客户 getNoinvitationcode() {//获取全部客户
getNoinvitationcodeAPI({orgid: this.orgid}).then(res => { 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); // console.log(res);
}); })
}, },
getSales() {//展示所有销售人员 getSales() {//展示所有销售人员
getSalesAPI({role: "销售", userid: this.userId}).then(res => { getSalesAPI({role: "销售", userid: this.userId}).then(res => {
// console.log(res); // console.log(res);
if (res.data.length > 0) { if (res.data.length > 0) {
this.salesData = res.data.map((item) => { this.salesData = res.data.map((item) => {
return { let mySales = {
username: item.username, username: item.username,
id: item.id, id: item.id,
}; };
return mySales;
}); });
// 注意：这里通常不需要设置默认选中第一个销售， this.form.id = this.salesData.id
// 因为用户需要主动选择。如果需要默认选中，可以取消注释下一行
// this.form.id = this.salesData[0]?.id || '';
} }
});
})
}, },
selectSales() { selectSales() {
this.getSales(); this.getSales()
this.isShow = true; this.isShow = true
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
// 更新选中的客户ID数组 // console.log(val);
this.customerid = val.map(item => item.id); // 更简洁的写法 this.customerid = [];
// 更新是否有选中项的状态 val.forEach(item => {
this.hasSelection = this.customerid.length > 0; this.customerid.push(item.id)
// console.log(this.customerid); })
// console.log(this.customerid)
}, },
cancelSelection() { cancelSelection() {
this.$refs.table.clearSelection(); this.$refs.table.clearSelection();
// 清除选择后，确保按钮状态更新（虽然通常 clearSelection 会触发 handleSelectionChange）
this.hasSelection = false;
this.customerid = [];
}, },
handleClose() { handleClose() {
this.isShow = false; this.isShow = false
}, },
salesSubmit() { salesSubmit() {
// 确保至少选择了一个客户和一个销售 let params = {
if (this.customerid.length === 0) { customerid: this.customerid,//这个是数组
this.$message({ salemanid: this.form.id//这个是字符串就行
message: '请至少选择一个客户!',
type: 'warning'
});
return;
} }
if (!this.form.id) {
this.$message({
message: '请选择销售人员!',
type: 'warning'
});
return;
}
let formData = new FormData(); let formData = new FormData();
// API 期望 customerid 是 JSON 字符串化的数组
formData.append('customerid', JSON.stringify(this.customerid)); formData.append('customerid', JSON.stringify(this.customerid));
formData.append('salemanid', this.form.id); formData.append('salemanid', this.form.id);
// const fromdata = this.getFormData(params);
addUserCustomerAPI(formData).then(res => { addUserCustomerAPI(formData).then(res => {
if (res.status == true) { if (res.status == true) {
this.isShow = false; this.isShow = false
this.getNoinvitationcode(); // 刷新客户列表 this.getNoinvitationcode()
// 清空选择状态
this.$refs.table.clearSelection();
this.hasSelection = false;
this.customerid = [];
this.form.id = ''; // 清空已选销售
this.$message({ this.$message({
message: '分配成功!', message: '分配成功!',
type: 'success' type: 'success'
}); })
} else {
this.$message({
message: res.message || '分配失败!',
type: 'error'
});
} }
}).catch(error => { })
this.$message({
message: '分配请求出错: ' + error.message,
type: 'error'
});
});
}, },
cancel() { cancel() {
this.isShow = false; this.isShow = false
}, },
// getFormData(object) { // 转换参数为formdata格式 - 当前未使用 getFormData(object) {//转换参数为formdata格式
// const formData = new FormData(); const formData = new FormData();
// Object.keys(object).forEach(key => { Object.keys(object).forEach(key => {
// const value = object[key]; const value = object[key];
// if (Array.isArray(value)) { if (Array.isArray(value)) {
// value.forEach((subValue, i) => { value.forEach((subValue, i) => {
// formData.append(key + `[${i}]`, subValue) formData.append(key + `[${i}]`, subValue)
// }) })
// } else { } else {
// formData.append(key, object[key]) formData.append(key, object[key])
// } }
// }) })
// return formData; return formData;
// }, },
}
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
.button-container {
margin-top: 20px;
display: flex;
gap: 10px; // 按钮之间的间距
}
.action-button {
padding: 8px 16px; // 增加按钮内边距
font-size: 14px; // 调整字体大小
border-radius: 4px; // 添加圆角
}
.myDialog { .myDialog {
.radio-group-container {
// 为单选按钮组添加最大高度和滚动条
max-height: 200px;
overflow-y: auto;
border: 1px solid #e4e7ed; // 可选：添加边框
border-radius: 4px; // 可选：添加圆角
padding: 5px; // 可选：内部填充
}
.radio { .radio {
// 单选按钮项的样式（如果需要） display: flex;
margin-bottom: 5px; // 项之间的间距 flex-direction: column;
height: 200px;
&:last-child { width: 200px;
margin-bottom: 0; // 最后一项移除下边距 overflow: hidden;
} overflow-y: scroll;
} }
.dialog-footer { .dialog-footer {

158
f/web-kboss/src/views/operation/supplierManagement/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="box backgroundColor"> <div class="box">
<div class="footer" style="background-color: white"> <div class="footer" style="background-color: white">
<el-button size="small" type="success" @click="addSupp">添加供应商</el-button> <el-button size="small" type="success" @click="addSupp">添加供应商</el-button>
</div> </div>
@ -8,53 +8,43 @@
:row-key="getRowKeys" border @expand-change="expandChangeHandler" v-loading="loading"> :row-key="getRowKeys" border @expand-change="expandChangeHandler" v-loading="loading">
<el-table-column type="expand"> <el-table-column type="expand">
<template slot-scope="props"> <template slot-scope="props">
<div class="details-container"> <el-form label-position="left" inline class="demo-table-expand" style="display: flex;flex-wrap: wrap">
<div class="details-header"> <el-form-item style="display: flex;justify-content: flex-start" label="供应商名称：">
<h3>供应商详细信息</h3> <span>{{ props.row.orgname }}</span>
</div> </el-form-item>
<div class="details-content"> <el-form-item style="display: flex;justify-content: flex-start" label="起效日期：">
<div class="details-row"> <span>{{ props.row.start_date }}</span>
<div class="details-item"> </el-form-item>
<span class="details-label">供应商名称：</span> <el-form-item style="display: flex;justify-content: flex-start" label="描述：">
<span class="details-value">{{ props.row.orgname }}</span> <span>{{ props.row.description }}</span>
</div> </el-form-item>
<div class="details-item"> <el-form-item style="display: flex;justify-content: flex-start" label="失效日期：">
<span class="details-label">起效日期：</span> <span>{{ props.row.end_date }}</span>
<span class="details-value">{{ props.row.start_date }}</span> </el-form-item>
</div> <el-form-item style="display: flex;justify-content: flex-start" label="联系人电话：">
<div class="details-item"> <span>{{ props.row.contactor_phone }}</span>
<span class="details-label">描述：</span> </el-form-item>
<span class="details-value">{{ props.row.description }}</span> <el-form-item style="display: flex;justify-content: flex-start" label="协议修改：">
</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-button type="primary" @click="updateProtocol(props.row)" size="mini">修改协议</el-button>
<el-button type="primary" @click="addProductExcel(props.row)" size="mini">批量导入产品</el-button> </el-form-item>
<el-button v-if="props.row.salemode == 1" type="primary" @click="rpRebateCtlDialogVisibleTrue(props.row)" size="mini">添加回佣</el-button> <el-form-item style="display: flex;justify-content: flex-start" label="邮箱：">
</div> <span>{{ props.row.emailaddress }}</span>
</div> </el-form-item>
</div> <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-tabs type="border-card" @tab-click="handleClick" v-if="props.row.salemode == '1'"> <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-tab-pane label="周结" name="first" v-if="oldRpRebate[0]">
<el-table :data="oldRpRebate[0]" style="width: 100%"> <el-table :data="oldRpRebate[0]" style="width: 100%">
@ -274,8 +264,7 @@
<el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
:on-change="handleAvatarSuccess" :on-remove="handleRemove"> :on-change="handleAvatarSuccess" :on-remove="handleRemove">
<img v-if="imageUrl" :src="imageUrl" class="avatar"/> <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
<!-- 修改：仅在没有图片时显示加号 --> <i style="
<i v-else style="
font-size: 60px; font-size: 60px;
border: 1px solid #aaa; border: 1px solid #aaa;
padding: 10px; padding: 10px;
@ -1130,8 +1119,6 @@ export default {
}, },
handleRemove(file) { //图片展示⬇ handleRemove(file) { //图片展示⬇
// 当图片被移除时，清空 imageUrl，这样加号会重新显示
this.imageUrl = "";
}, },
handleAvatarSuccess(file, fileList) { handleAvatarSuccess(file, fileList) {
this.imageUrl = URL.createObjectURL(file.raw); this.imageUrl = URL.createObjectURL(file.raw);
@ -1405,73 +1392,4 @@ export default {
align-items: center; 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> </style>

376
f/web-kboss/src/views/product/mainPage/index.vue
View File

@ -1,97 +1,93 @@
<template> <template>
<div class="mainBox"> <div class="mainBox">
<div class="leftBox"> <div class="leftBox">
<div class="section">
<div class="bigTitle">快捷导航</div> <div class="bigTitle">快捷导航</div>
<ul class="recUl"> <ul class="recUl">
<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"> <li v-for="(item,index) in navList" :key="index" @click="goBaidu(item)">{{ item.name }}</li>
</ul>
<div class="bigTitle">资源概览</div> <div class="bigTitle">资源概览</div>
<ul class="recUl overView"> <ul class="recUl overView">
<li v-for="(item, index) in viewList" :key="index"> <li v-for="(item, index) in viewList" :key="index">
<div class="overview-item">
<span class="title">{{ item.name }}</span> <span class="title">{{ item.name }}</span>
<span class="number">{{ item.count }}</span> <span class="number">{{ item.count }}</span>
</div>
</li> </li>
</ul>
</div>
<div class="section">
</ul>
<div class="bigTitle">到期预警</div> <div class="bigTitle">到期预警</div>
<el-table <el-table
height="250px" height="250px"
border border
:data="tableData" :data="tableData"
style="width: 100%" style="width: 100%">
header-cell-class-name="table-header" <el-table-column
cell-class-name="table-cell"> prop="name"
<el-table-column prop="name" label="名称" width="180"></el-table-column> label="名称"
<el-table-column prop="instanceid" label="资源id" width="180"></el-table-column> width="180">
<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>
<el-table-column prop="days" label="剩余天数"> <el-table-column
<template slot-scope="scope"> prop="instanceid"
<span :class="scope.row.days < 3 ? 'critical' : ''">{{ scope.row.days }}天</span> label="资源id"
</template> width="180">
</el-table-column>
<el-table-column
prop="status"
label="状态">
</el-table-column>
<el-table-column
prop="days"
label="剩余天数">
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div>
<div class="rightBox"> <div class="rightBox">
<!-- 用户信息 --> <div class="user">
<div class="user card">
<div class="userImg"> <div class="userImg">
<div class="imgUser">{{ userInfo.username.charAt(0) }}</div> <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 class="price card">
<div class="title">账户余额</div>
<div class="content">
<span class="balance">￥{{ initMybalance() }}</span>
<el-button size="mini" type="primary" @click="$router.push('/kbossCharge')">
立即充值
</el-button>
</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>
<div class="announcements card"> <li>
<div class="title">系统公告</div> <span>手机号：</span>
<ul class="announcement-list"> <span class="content">{{ userInfo.mobile }}</span>
<li v-for="i in 3" :key="i"> </li>
<i class="el-icon-bell"></i> <li>
<span>这是第{{ i }}条系统公告内容...</span> <span>邮箱：</span>
<span class="content">{{ userInfo.email }}</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div v-show="false" class="price">
<div class="title">账户余额</div>
<div class="content">
<span>￥{{ initMybalance() }}</span>
<el-button
size="mini"
type="primary"
@click="$router.push('/kbossCharge')">充值
</el-button>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import { mapState } from "vuex"; import {mapGetters, mapState} from "vuex";
import {reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav} from "@/api/newHome"; import {reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav} from "@/api/newHome";
export default Vue.extend({ export default Vue.extend({
@ -114,7 +110,8 @@ export default Vue.extend({
reqQuickNav().then(res => { reqQuickNav().then(res => {
this.navList = res.data this.navList = res.data
}) })
this.userInfo = JSON.parse(localStorage.getItem("user_info") || "{}"); this.userInfo = JSON.parse(JSON.parse(JSON.stringify(localStorage.getItem("user_info")) || "{}"));
localStorage.setItem('price', this.mybalance)
reqNewHomeResource().then(res => { reqNewHomeResource().then(res => {
if (res.status) { if (res.status) {
this.viewList = res.data || []; this.viewList = res.data || [];
@ -132,6 +129,8 @@ export default Vue.extend({
}, },
methods: { methods: {
goBaidu(item) { goBaidu(item) {
console.log(item.listUrl)
console.log(item.url)
this.$store.commit('setRedirectUrl', item.url) this.$store.commit('setRedirectUrl', item.url)
localStorage.setItem('redirectUrl', item.url) localStorage.setItem('redirectUrl', item.url)
localStorage.setItem('userRescourseUrl', item.listUrl) localStorage.setItem('userRescourseUrl', item.listUrl)
@ -144,231 +143,174 @@ export default Vue.extend({
}) })
}, },
initMybalance() { initMybalance() {
return sessionStorage.getItem('mybalance') || '0.00' return sessionStorage.getItem('mybalance')
}, },
}, }, computed: {
computed: {
...mapState({ ...mapState({
mybalance: state => state.user.mybalance, mybalance: state => state.user.mybalance,
}) })
}, },
}) })
</script> </script>
<style lang="less" scoped> <style scoped lang="scss">
.mainBox { .mainBox {
background: #f5f7fa; background: #f6f6f6;
width: 100%; width: 100%;
height: calc(100vh - 80px); height: calc(100vh - 80px);
display: flex; display: flex;
padding: 10px; justify-content: space-between;
box-sizing: border-box;
gap: 20px;
} }
.leftBox { .leftBox {
width: 65%; padding-left: 15px;
display: flex; width: 60%;
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 { .recUl {
display: grid; width: 100%;
grid-template-columns: repeat(4, 1fr); display: flex;
gap: 15px; flex-wrap: wrap;
list-style: none; justify-content: flex-start;
padding: 0;
margin: 0;
li { li {
padding: 15px; margin-right: 5px;
cursor: pointer; border-radius: 12px;
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; margin-bottom: 10px;
color: #409eff; width: 24%;
} padding: 15px 30px;
cursor: pointer;
transition: all .3s ease-in-out;
border: 2px solid #f1ebeb;
background: white;
&:hover { &:hover {
transform: translateY(-3px); color: #171b4a;
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2); background: #d1caca;
border-color: #409eff;
} }
} }
} }
.overView { .overView {
grid-template-columns: repeat(2, 1fr);
li { li {
cursor: default; border-radius: 0 !important;
&:hover {
transform: none;
box-shadow: none;
border-color: #ebeef5;
}
}
.overview-item { &:hover {
display: flex; cursor: default;
justify-content: space-between; background: white !important;
width: 100%; }
.title { .title {
font-size: 16px; font-size: 14px;
color: #606266; color: #333;
margin-right: 10px;
} }
.number { .number {
font-size: 20px; font-size: 18px;
font-weight: bold; color: #0e0b0b;
color: #303133;
} }
} }
}
}
.rightBox {
width: 40%;
padding: 0 15px;
} }
.bigTitle { .bigTitle {
color: #303133; color: #4c5a7e;
margin-bottom: 20px; margin: 15px 0;
font-size: 18px; font-size: 20px;
font-weight: bold; font-weight: bold;
padding-bottom: 10px;
border-bottom: 2px solid #409eff;
display: inline-block;
} }
.user { .user {
margin-top: 15px;
display: flex; display: flex;
justify-content: space-between;
align-items: center; 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 { .userImg {
margin-right: 20px;
.imgUser { width: 150px;
// height: 150px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 80px; width: 80px;
height: 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 { .price {
margin-top: 15px;
width: 100%;
height: 150px;
padding: 15px;
background: white;
.content { .content {
margin-top: 15px;
font-size: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
}
.balance { .title {
font-size: 28px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #e6a23c; color: #4c5a7e;
}
} }
} }
.announcements { .chargeStyle {
.announcement-list { padding: 5px 20px;
list-style: none; border-radius: 8px;
padding: 0; font-size: 16px;
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; font-weight: bold;
color: #4c5a7e;
} }
.table-header { .imgUser {
background-color: #f5f7fa !important; text-align: center;
color: #606266; line-height: 80px;
font-weight: bold; width: 80px;
} height: 80px;
border-radius: 50%;
.table-cell { background: #081020;
padding: 8px 0 !important; font-size: 48px;
color: white;
} }
</style> </style>

76
f/web-kboss/src/views/product/productHome/productIndex/index.vue
View File

@ -23,8 +23,7 @@
<div class="configStyle"> <div class="configStyle">
<span>数据盘：3.84T U.2 NVMe SSD * 1</span> <span>数据盘：3.84T U.2 NVMe SSD * 1</span>
<span>GPU：NVIDIA GeForce RTX 4090 * 8</span> <span>GPU：NVIDIA GeForce RTX 4090 * 8</span>
<span>光速网卡：Mellanox ConnectX-5 Lx 25G SFP28 2-port</span> <span>光速网卡：Mellanox ConnectX-5 Lx 25G SFP28 2-port</span></div>
</div>
<div class="butBox"> <div class="butBox">
<span class="buyBtn" @click="dialogVisibleMy= true"> 立即购买</span> <span class="buyBtn" @click="dialogVisibleMy= true"> 立即购买</span>
</div> </div>
@ -54,10 +53,10 @@
<div class="dsPcPad"> <div class="dsPcPad">
<span class="hmc1icon" style="position: relative;height: 150px"> <span class="hmc1icon" style="position: relative;height: 150px">
<div class="aniIcon" <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"> 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>
<div class="hmc3nico"><img height="180" <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> </span>
</div> </div>
<!-- <div class="dsPhone">--> <!-- <div class="dsPhone">-->
@ -75,17 +74,20 @@
</span> </span>
</a> </a>
</li> </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"> <a class="hmc1a aniIconBtn">
<div class="dsPcPad"> <div class="dsPcPad">
<span class="hmc1icon" style="position: relative;height: 150px"> <span class="hmc1icon"
style="position: relative;height: 150px">
<div class="aniIcon" <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" <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> </span>
</div> </div>
<!-- <div class="dsPhone">--> <!-- <div class="dsPhone">-->
@ -109,12 +111,12 @@
<div class="dsPcPad"> <div class="dsPcPad">
<span class="hmc1icon" style="position: relative;height: 150px"> <span class="hmc1icon" style="position: relative;height: 150px">
<div class="aniIcon" <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"> 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>
<div class="hmc3nico"><img height="180" <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> </span>
</div> </div>
<strong style="margin-top:25px">公有云</strong> <strong style="margin-top:25px">公有云</strong>
@ -143,8 +145,9 @@
</div> </div>
<div class="new-nav"> <div class="new-nav">
<ul class="nav-ul"> <ul class="nav-ul">
<li :class="{ navLi: item.name === currentTitle }" @click="mouseOver($event, item)" <li
v-for="(item, index) in menuArr" :key="item.name"> :class="{ navLi: item.name === currentTitle }"
@click="mouseOver($event,item)" v-for="(item,index) in menuArr" :key="item.name">
<div> <div>
{{ item.name }} {{ item.name }}
</div> </div>
@ -165,17 +168,16 @@
<div class="content-r"> <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" <li @click="goTwo(item)" v-for="(item,index) in currentData" :key="index"
style="width: 300px;margin: 0 15px 10px 15px"> style="width: 300px;margin: 0 15px 10px 15px">
<a class="sq6Wd6jr"> <a class="sq6Wd6jr">
<div class="__9uUkOV59"> <div class="__9uUkOV59"><h3><span class="LLZ9Q8FX">{{ item.product_name }} </span></h3>
<h3><span class="LLZ9Q8FX">{{ item.product_name }} </span></h3> <p class="xQ1YIHP8">{{ item.description }}</p></div>
<p class="xQ1YIHP8">{{ item.description }}</p>
</div>
<div class="PfF8K5ib"> <div class="PfF8K5ib">
<div v-for="(itemOne, index) in JSON.parse(JSON.stringify(item.tags))" :key="index" class="_dDwK_qk"> <div v-for="(itemOne,index) in JSON.parse(JSON.stringify(item.tags))" :key="index"
<span>{{ class="_dDwK_qk"><span>{{
itemOne itemOne
}}</span> }}</span>
</div> </div>
@ -184,7 +186,8 @@
style="display: flex;justify-content: flex-start;align-items: center"> style="display: flex;justify-content: flex-start;align-items: center">
<span class="__1wQVatn_ vh___DYU PEZeG2zA" <span class="__1wQVatn_ vh___DYU PEZeG2zA"
style="display: inline-block;align-self: flex-end">折扣</span> 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 item.discount
}} </span> }} </span>
<span class="__1wQVatn_ cB_ePAPu XeaRmkQC" <span class="__1wQVatn_ cB_ePAPu XeaRmkQC"
@ -1051,7 +1054,9 @@ export default {
background-color: white; background-color: white;
} }
.all-cloud {} .all-cloud {
}
.cloud-header { .cloud-header {
display: flex; display: flex;
@ -1065,7 +1070,9 @@ export default {
flex-direction: column; flex-direction: column;
} }
.jd-box {} .jd-box {
}
.all-cloud-item { .all-cloud-item {
display: flex; display: flex;
@ -1156,23 +1163,20 @@ export default {
.new-nav { .new-nav {
overflow-x: auto; overflow-x: auto;
} }
.main-box {
.main-box {} }
.cloud-header { .cloud-header {
margin: 0 0 15px 0 !important; margin: 0 0 15px 0 !important;
} }
.mobile-banner { .mobile-banner {
display: none; display: none;
} }
.all-cloud-item { .all-cloud-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.other-product-ul { .other-product-ul {
li { li {
@ -1253,7 +1257,6 @@ export default {
position: relative; position: relative;
font-weight: bold; font-weight: bold;
z-index: 1; z-index: 1;
//padding: 10px 0 0 10px; //padding: 10px 0 0 10px;
&:first-child { &:first-child {
height: 60px; height: 60px;
@ -1324,8 +1327,7 @@ export default {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 2; -webkit-line-clamp: 2; /* 控制最大行数 */
/* 控制最大行数 */
} }
* { * {
@ -1442,7 +1444,6 @@ a:hover {
.myDivider { .myDivider {
display: none; display: none;
} }
.new-nav { .new-nav {
padding: 0 !important; padding: 0 !important;
display: flex; display: flex;
@ -1466,12 +1467,9 @@ a:hover {
padding: 0 10px; padding: 0 10px;
display: grid !important; display: grid !important;
grid-template-columns: 1fr 1fr !important; grid-template-columns: 1fr 1fr !important; /* 两列等宽 */
/* 两列等宽 */
//justify-content: space-around !important; //justify-content: space-around !important;
gap: 10px; gap: 10px; /* 上下左右间距 */
/* 上下左右间距 */
li { li {
margin-right: 0 !important; margin-right: 0 !important;
margin-left: 0 !important; margin-left: 0 !important;