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

uptada style

Browse Source
This commit is contained in:
hrx 2025-09-22 17:57:25 +08:00
parent 1ac734775d
commit 491bcd8d13
15 changed files with 922 additions and 653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,39 +1,30 @@
<template> <template>
<div class="navbar" <div class="navbar" style="height: 48px;background-color: white;color: white!important;">
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="" <img @click="$router.push('/product/productHome')" src="./img/img.png" alt="" class="img">
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 <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" />
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" id="breadcrumb-container" class="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;">
<span v-if="isShowKbossCharge" @click="$router.push('/product/productHome')" <span v-if="isShowKbossCharge" @click="$router.push('/product/productHome')"
class="right-menu-item hover-effect " class="right-menu-item hover-effect "
style="font-size: 16px;display: flex;justify-content: center;align-items: center"> style="font-size: 16px;display: flex;justify-content: center;align-items: center">
<b style="display: flex;justify-content: center;align-items: center"> <b style="display: flex;justify-content: center;align-items: center">
回到首页 回到首页
</b> </b>
</span> </span>
<!-- <el-button @click="openChou" type="text">全部产品</el-button>--> <!-- <el-button @click="openChou" type="text">全部产品</el-button>-->
<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" <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-search" @click="showSearch" />
@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">-->
@ -48,18 +39,17 @@
<!-- </el-tooltip>--> <!-- </el-tooltip>-->
<el-tooltip class="item" effect="dark" content="信息" placement="bottom"> <el-tooltip 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">
<el-badge :value="count==0?'':count" :max="9" class="badge" <el-badge :value="count == 0 ? '' : count" :max="9" class="badge"
style="height: 35px;display: flex;justify-content: center;align-items: center"> style="height: 35px;display: flex;justify-content: center;align-items: center">
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-message" @click="infrom"/> <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-message" @click="infrom" />
</el-badge> </el-badge>
</span> </span>
</el-tooltip> </el-tooltip>
<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" <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-s-data" @click="goScreen" />
@click="goScreen"/>
</span> </span>
</el-tooltip> </el-tooltip>
@ -69,8 +59,7 @@
</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" style="margin-right: 0" trigger="click">
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
@ -84,48 +73,37 @@
<!-- <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 <div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
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 <span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:
style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID: <span <span ref="contentToCopy">
ref="contentToCopy"> {{
{{ userId
userId }}
}}
</span> </span>
<svg <svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
@click="copyBtn" width="12" height="12" style="fill: #1019ab;">
class="copy-btn" <path
viewBox="0 0 1024 1024" 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"
xmlns="http://www.w3.org/2000/svg" p-id="1521"></path>
width="12" </svg>
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>
</svg>
</span> </span>
</div> </div>
<el-divider style="margin: 0!important;"></el-divider> <el-divider style="margin: 0!important;"></el-divider>
<div <div v-if="role.includes('客户')"
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;" <span style="color:#666;display: block;font-size: 14px;" class="moneyNow"><span
class="moneyNow"><span style="display: block;margin-bottom: 5px">余额</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
style="padding: 8px; "> style="padding: 8px; ">
充值 充值
</el-button> </el-button>
</div> </div>
<el-dropdown-item v-if="role.includes('客户')" <el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')">
@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-->
@ -158,7 +136,7 @@
<!-- 移动端通知弹框 --> <!-- 移动端通知弹框 -->
<el-drawer :visible.sync="drawer" v-if="isMobile" :direction="direction" :withHeader="false" size="90%" <el-drawer :visible.sync="drawer" v-if="isMobile" :direction="direction" :withHeader="false" size="90%"
class="drawerMobile"> class="drawerMobile">
<el-container class="container"> <el-container class="container">
<el-aside width="95px" class="aside"> <el-aside width="95px" class="aside">
<div class="header">消息中心</div> <div class="header">消息中心</div>
@ -178,9 +156,9 @@
<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" @expand-change="expandChangeHandler" ref="table" <el-table :header-cell-style="rowClass" @expand-change="expandChangeHandler" ref="table"
@row-click="expandChangeHandler1" class="table" :row-class-name="rowStyle" @row-click="expandChangeHandler1" class="table" :row-class-name="rowStyle"
:data="alliInformationList?alliInformationList:[]" height="680" tooltip-effect="dark" :data="alliInformationList ? alliInformationList : []" height="680" tooltip-effect="dark"
@selection-change="handleSelectionChange"> @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">
@ -204,8 +182,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" @expand-change="expandChangeHandler" :row-class-name="rowStyle" :data="unreadMessageList" height="680"
height="680" tooltip-effect="dark" @selection-change="handleSelectionChange"> 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">
@ -228,8 +206,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" ref="table" class="table" @row-click="expandChangeHandler2" <el-table :header-cell-style="rowClass" ref="table" class="table" @row-click="expandChangeHandler2"
@expand-change="expandChangeHandler" @selection-change="handleSelectionChange" @expand-change="expandChangeHandler" @selection-change="handleSelectionChange"
:row-class-name="rowStyle" :data="readInformationList" height="680" tooltip-effect="dark"> :row-class-name="rowStyle" :data="readInformationList" height="680" tooltip-effect="dark">
<el-table-column type="expand" width="30px"> <el-table-column type="expand" width="30px">
</el-table-column> </el-table-column>
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
@ -246,7 +224,7 @@
<!-- 通知弹框 --> <!-- 通知弹框 -->
<el-drawer @close="closeMesssageWindow" :visible.sync="drawer" v-else :direction="direction" :withHeader="false" <el-drawer @close="closeMesssageWindow" :visible.sync="drawer" v-else :direction="direction" :withHeader="false"
size="70%" class="drawer"> size="70%" class="drawer">
<el-container style="height: 100vh"> <el-container style="height: 100vh">
<el-aside width="200px" class="aside"> <el-aside width="200px" class="aside">
<div class="header" style="font-size:16px;">消息中心</div> <div class="header" style="font-size:16px;">消息中心</div>
@ -266,8 +244,8 @@
<el-button size="small" type="danger" @click="delMessage">删除</el-button> <el-button size="small" type="danger" @click="delMessage">删除</el-button>
</div> </div>
<el-table @expand-change="expandChangeHandler" ref="table" @row-click="expandChangeHandler1" class="table" <el-table @expand-change="expandChangeHandler" ref="table" @row-click="expandChangeHandler1" class="table"
:row-class-name="rowStyle" :data="alliInformationList?alliInformationList:[]" height="780" :row-class-name="rowStyle" :data="alliInformationList ? alliInformationList : []" height="780"
tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> tooltip-effect="dark" style="width: 100%" @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">
@ -291,8 +269,8 @@
<el-button size="small" type="danger" @click="delMessage">删除</el-button> <el-button size="small" type="danger" @click="delMessage">删除</el-button>
</div> </div>
<el-table @row-click="expandChangeHandler1" ref="table" @expand-change="expandChangeHandler" <el-table @row-click="expandChangeHandler1" ref="table" @expand-change="expandChangeHandler"
:row-class-name="rowStyle" :data="unreadMessageList" height="780" tooltip-effect="dark" :row-class-name="rowStyle" :data="unreadMessageList" height="780" tooltip-effect="dark"
style="width: 100%" @selection-change="handleSelectionChange"> style="width: 100%" @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">
@ -315,8 +293,8 @@
<el-button size="small" type="danger" @click="delMessage">删除</el-button> <el-button size="small" type="danger" @click="delMessage">删除</el-button>
</div> </div>
<el-table ref="table" @row-click="expandChangeHandler2" @expand-change="expandChangeHandler" <el-table ref="table" @row-click="expandChangeHandler2" @expand-change="expandChangeHandler"
@selection-change="handleSelectionChange" :row-class-name="rowStyle" :data="readInformationList" @selection-change="handleSelectionChange" :row-class-name="rowStyle" :data="readInformationList"
height="780" tooltip-effect="dark" style="width: 100%"> height="780" tooltip-effect="dark" style="width: 100%">
<el-table-column type="expand" width="30px"> <el-table-column type="expand" width="30px">
</el-table-column> </el-table-column>
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
@ -334,8 +312,8 @@
<!-- 修改密码弹窗 --> <!-- 修改密码弹窗 -->
<el-dialog title="修改密码 " :visible.sync="passwordDialog" width="45%" :before-close="handleClose1" <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 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>
@ -355,9 +333,9 @@
<!-- 修改个人信息弹窗 --> <!-- 修改个人信息弹窗 -->
<el-dialog title="修改个人信息" :visible.sync="editUserInfoDialog" width="45%" :before-close="handleClose2" <el-dialog title="修改个人信息" :visible.sync="editUserInfoDialog" width="45%" :before-close="handleClose2"
style="width: 80%" class="userInfoDialog"> style="width: 80%" class="userInfoDialog">
<el-form ref="editUserInfoForm" :model="editUserInfoForm" label-width="120px" style="width: 70%" <el-form ref="editUserInfoForm" :model="editUserInfoForm" label-width="120px" style="width: 70%"
:rules="editRules"> :rules="editRules">
<el-form-item label="昵称:" prop=""> <el-form-item label="昵称:" prop="">
<el-input v-model="editUserInfoForm.nick_name" placeholder="请输入昵称"></el-input> <el-input v-model="editUserInfoForm.nick_name" placeholder="请输入昵称"></el-input>
</el-form-item> </el-form-item>
@ -373,8 +351,8 @@
<el-form-item label="二维码名片:" prop=""> <el-form-item label="二维码名片:" prop="">
<div class="upload-box"> <div class="upload-box">
<el-upload style="height: 60px; width: 60px;" class="avatar-uploader" action="#" :show-file-list="false" <el-upload style="height: 60px; width: 60px;" class="avatar-uploader" action="#" :show-file-list="false"
:auto-upload="false" :on-change="handleAvatarSuccess"> :auto-upload="false" :on-change="handleAvatarSuccess">
<img style="height: 60px; width: 60px" v-if="imageUrl" :src="imageUrl" class="avatar"/> <img style="height: 60px; width: 60px" v-if="imageUrl" :src="imageUrl" class="avatar" />
<i style="height: 60px; width: 60px" v-else class="el-icon-plus avatar-uploader-icon"></i> <i style="height: 60px; width: 60px" v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> </el-upload>
</div> </div>
@ -388,7 +366,7 @@
<!-- Form --> <!-- Form -->
<el-button type="text" @click="dialogFormVisible = true" v-if="this.$store.state.operationAnalysis.themeStates" <el-button type="text" @click="dialogFormVisible = true" v-if="this.$store.state.operationAnalysis.themeStates"
class="themeBtn"> class="themeBtn">
<img src="../../icons/svg/主题.png" alt="" style="width: 26px;height: 26px;"> <img src="../../icons/svg/主题.png" alt="" style="width: 26px;height: 26px;">
</el-button> </el-button>
@ -425,39 +403,30 @@
</el-dialog> </el-dialog>
<!-- 渠道管理--> <!-- 渠道管理-->
<el-dialog <el-dialog title="渠道管理信息提示" :visible.sync="channelManagementShow" custom-class="channel-dialog-style">
title="渠道管理信息提示" <span
:visible.sync="channelManagementShow" class="indent">开元云公司作为一级分销商面对直接客户，售出设备产品。产品由供应商上传平台，设置产品价格配置，及设备账号密码等配置信息，开元云进行审核，审核通过产品上线，客户可直接购买。开元云可以将产品分配给各供应商销售，分配时配置给供应商的折扣，供应商得到产品及开元云的折扣后，设置折扣面向客户，客户通过kboss进行购买，分销商的客户如自己上传产品，也可以成为开元云的供应商。</span>
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>
</span> </span>
</el-dialog> </el-dialog>
<!-- searhcDiaolog--> <!-- searhcDiaolog-->
<el-dialog <el-dialog title="全站搜索" :visible.sync="searchDialogVisible" width="800px" :close-on-click-modal="false"
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>
</el-input> </el-input>
<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)"><div style="margin-right: 5px">{{ item.product_name }}</div> <img <span class="title" @click="goProductPage(item)">
v-if="item.type=='jd'" <div style="margin-right: 5px">{{ item.product_name }}</div> <img v-if="item.type == 'jd'"
src="./images/京东云.svg" src="./images/京东云.svg" alt="">
alt=""> <img v-else-if="item.type == 'bd'" src="./images/百度智能云.svg" alt="">
<img </span>
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>
@ -466,15 +435,10 @@
<img style="width: 200px;height: 200px;" src="./images/empty.svg" alt=""> <img style="width: 200px;height: 200px;" src="./images/empty.svg" alt="">
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
</span> </span>
</el-dialog> </el-dialog>
<el-drawer <el-drawer direction="ltr" style="z-index: 1000;width: 1205px" title="" custom-class="myDrawer"
direction="ltr" :visible.sync="drawerPro" :with-header="false">
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>
@ -486,7 +450,7 @@
</template> </template>
<script> <script>
import {mapGetters, mapState} from "vuex"; import { mapGetters, mapState } from "vuex";
import Breadcrumb from "@/components/Breadcrumb"; import Breadcrumb from "@/components/Breadcrumb";
import Hamburger from "@/components/Hamburger"; import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull"; import Screenfull from "@/components/Screenfull";
@ -513,9 +477,9 @@ import {
import messagedrawer from "@/layout/components/inFram/message"; import messagedrawer from "@/layout/components/inFram/message";
import store from "@/store"; import store from "@/store";
import PromotionalInvitationCode from "@/views/customer/promotionalInvitationCode/index.vue"; import PromotionalInvitationCode from "@/views/customer/promotionalInvitationCode/index.vue";
import {reqApplyChannel} from "@/api/customer/channel"; import { reqApplyChannel } from "@/api/customer/channel";
import {reqSearchProductList} from "@/api/product/product"; import { reqSearchProductList } from "@/api/product/product";
import {bdProducts, jdProducts} from "@/views/product/productionData"; import { bdProducts, jdProducts } from "@/views/product/productionData";
import { getHomePath } from "@/views/setting/tools"; import { getHomePath } from "@/views/setting/tools";
export default { export default {
@ -557,13 +521,13 @@ export default {
}, },
rules: { rules: {
password: [ password: [
{required: true, message: "请输入旧密码", trigger: "blur"}, { required: true, message: "请输入旧密码", trigger: "blur" },
], ],
newpassword: [ newpassword: [
{required: true, message: "请输入新密码", trigger: "blur"}, { required: true, message: "请输入新密码", trigger: "blur" },
], ],
configPassword: [ configPassword: [
{required: true, message: "请确认新密码", trigger: "blur"}, { required: true, message: "请确认新密码", trigger: "blur" },
], ],
}, },
editRules: { editRules: {
@ -573,7 +537,7 @@ export default {
/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/, /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
message: "请输入有效的手机号", message: "请输入有效的手机号",
}, },
{message: "请输入有效的手机号", trigger: "change"}, { message: "请输入有效的手机号", trigger: "change" },
], ],
}, },
squareUrl: squareUrl:
@ -672,60 +636,60 @@ export default {
console.log("对等连接~~") console.log("对等连接~~")
this.$router.push({ this.$router.push({
path: '/product/baiduProduct', path: '/product/baiduProduct',
query: {product_name: '网络'} query: { product_name: '网络' }
}) })
} else if (bdProducts['存储'].includes(item.product_name)) { } else if (bdProducts['存储'].includes(item.product_name)) {
this.$router.push({ this.$router.push({
path: 'baiduProduct', path: 'baiduProduct',
query: {product_name: '存储'} query: { product_name: '存储' }
}) })
} else if (bdProducts['云与业务安全'].includes(item.product_name)) { } else if (bdProducts['云与业务安全'].includes(item.product_name)) {
this.$router.push({ this.$router.push({
path: 'baiduProduct', path: 'baiduProduct',
query: {product_name: '云与业务安全'} query: { product_name: '云与业务安全' }
}) })
} else if (bdProducts['计算'].includes(item.product_name)) { } else if (bdProducts['计算'].includes(item.product_name)) {
console.log("跳转了") console.log("跳转了")
this.$router.push({ this.$router.push({
path: 'baiduProduct', path: 'baiduProduct',
query: {product_name: '计算'} query: { product_name: '计算' }
}) })
} else if (bdProducts['数据库'].includes(item.product_name)) { } else if (bdProducts['数据库'].includes(item.product_name)) {
this.$router.push({ this.$router.push({
path: 'baiduProduct', path: 'baiduProduct',
query: {product_name: '数据库'} query: { product_name: '数据库' }
}) })
} else { } else {
this.$router.push({ this.$router.push({
path: 'baiduProduct', path: 'baiduProduct',
query: {product_name: 'AI能力引擎'} query: { product_name: 'AI能力引擎' }
}) })
} }
} else if (item.type === "jd") { } else if (item.type === "jd") {
if (jdProducts['网络与CDN'].includes(item.product_name)) { if (jdProducts['网络与CDN'].includes(item.product_name)) {
this.$router.push({ this.$router.push({
name: 'jdProduct', name: 'jdProduct',
params: {product_name: '网络与CDN'} params: { product_name: '网络与CDN' }
}) })
} else if (jdProducts['存储'].includes(item.product_name)) { } else if (jdProducts['存储'].includes(item.product_name)) {
this.$router.push({ this.$router.push({
name: 'jdProduct', name: 'jdProduct',
params: {product_name: '存储'} params: { product_name: '存储' }
}) })
} else if (jdProducts['安全'].includes(item.product_name)) { } else if (jdProducts['安全'].includes(item.product_name)) {
this.$router.push({ this.$router.push({
name: 'jdProduct', name: 'jdProduct',
params: {product_name: '安全'} params: { product_name: '安全' }
}) })
} else if (jdProducts['弹性计算'].includes(item.product_name)) { } else if (jdProducts['弹性计算'].includes(item.product_name)) {
this.$router.push({ this.$router.push({
name: 'jdProduct', name: 'jdProduct',
params: {product_name: '弹性计算'} params: { product_name: '弹性计算' }
}) })
} else if (jdProducts['数据库'].includes(item.product_name)) { } else if (jdProducts['数据库'].includes(item.product_name)) {
this.$router.push({ this.$router.push({
name: 'jdProduct', name: 'jdProduct',
params: {product_name: '数据库'} params: { product_name: '数据库' }
}) })
} else { } else {
// console.log("走了京哦else") // console.log("走了京哦else")
@ -745,7 +709,7 @@ export default {
// setTimeout(() => { // setTimeout(() => {
// this.searchLoading = false // this.searchLoading = false
// }, 300) // }, 300)
reqSearchProductList({name: this.searchValue}).then(res => { reqSearchProductList({ name: this.searchValue }).then(res => {
this.searchLoading = false this.searchLoading = false
if (res.status) { if (res.status) {
this.searchResultList = res.data this.searchResultList = res.data
@ -779,7 +743,7 @@ export default {
}, },
channelFirstBtn() { channelFirstBtn() {
reqApplyChannel({user_id: this.userId}).then(res => { reqApplyChannel({ user_id: this.userId }).then(res => {
if (res.code == "100" || res.code == "210") { if (res.code == "100" || res.code == "210") {
this.$message.success(res.msg) this.$message.success(res.msg)
} else if (res.code == "300") { } else if (res.code == "300") {
@ -790,7 +754,7 @@ export default {
}) })
}, },
ChannelConfirmBtn() {//渠道确定按钮 ChannelConfirmBtn() {//渠道确定按钮
reqApplyChannel({user_id: this.userId, code: '200'}).then(res => { reqApplyChannel({ user_id: this.userId, code: '200' }).then(res => {
if (res.status) { if (res.status) {
this.$message.success("申请渠道成功，后续会有相关人员和您沟通~") this.$message.success("申请渠道成功，后续会有相关人员和您沟通~")
this.channelManagementShow = false this.channelManagementShow = false
@ -891,7 +855,7 @@ export default {
} }
}) })
}, },
rowStyle({row, rowIndex}) {//改变表格某一行样式 rowStyle({ row, rowIndex }) {//改变表格某一行样式
if (this.isOne == true && row.id == this.oneId) { if (this.isOne == true && row.id == this.oneId) {
return 'unReadColor'; return 'unReadColor';
} else if (row.msgstatus == 1) { } else if (row.msgstatus == 1) {
@ -914,7 +878,7 @@ export default {
this.getMsg() this.getMsg()
}, },
getMsg() {//获取所有信息 getMsg() {//获取所有信息
getMsgAPI({userid: this.userId}).then(res => { getMsgAPI({ userid: this.userId }).then(res => {
if (res.status && res.msg) { if (res.status && res.msg) {
this.alliInformationList = res.msg this.alliInformationList = res.msg
} }
@ -1044,7 +1008,7 @@ export default {
}, 100000); }, 100000);
}, },
async getUserInfo() { //获取个人信息 async getUserInfo() { //获取个人信息
getUserInfoAPI({id: this.userId}).then((res) => { getUserInfoAPI({ id: this.userId }).then((res) => {
if (res.status == true) { if (res.status == true) {
// this.nick_name = res.data[0].username; // this.nick_name = res.data[0].username;
this.userInfoList = res.data; this.userInfoList = res.data;
@ -1085,7 +1049,7 @@ export default {
type: "success", type: "success",
}); });
this.passwordDialog = false; this.passwordDialog = false;
this.$router.push({name: "Login"}); this.$router.push({ name: "Login" });
} else { } else {
this.$message({ this.$message({
message: res.msg, message: res.msg,
@ -1134,7 +1098,7 @@ export default {
editOnsubmit() { //修改个人信息 editOnsubmit() { //修改个人信息
this.editUserInfoForm.contactor_phone = this.editUserInfoForm.mobile; this.editUserInfoForm.contactor_phone = this.editUserInfoForm.mobile;
editUserInfoAPI({...this.editUserInfoForm, id: this.userId,}).then( editUserInfoAPI({ ...this.editUserInfoForm, id: this.userId, }).then(
(res) => { (res) => {
if (res.status == true) { if (res.status == true) {
this.$message({ this.$message({
@ -1318,6 +1282,41 @@ 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;
@ -1335,8 +1334,10 @@ export default {
} }
.indent { .indent {
display: block; /* 将 span 元素转换为块级元素 */ display: block;
text-indent: 2em; /* 设置首行缩进的大小为 2 个字符 */ /* 将 span 元素转换为块级元素 */
text-indent: 2em;
/* 设置首行缩进的大小为 2 个字符 */
line-height: 25px; line-height: 25px;
} }
@ -1650,6 +1651,7 @@ export default {
.logo { .logo {
display: none; display: none;
} }
.hamburger-container { .hamburger-container {
display: block; display: block;
} }
@ -1667,7 +1669,8 @@ export default {
border-bottom-color: #255fd5 !important; border-bottom-color: #255fd5 !important;
} }
.searchUl, .searchEmpty { .searchUl,
.searchEmpty {
height: 250px; height: 250px;
width: 100%; width: 100%;
@ -1723,7 +1726,6 @@ export default {
} }
} }
} }
</style> </style>
<style> <style>
.cuxiao-style { .cuxiao-style {

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

@ -4,21 +4,27 @@
<!-- <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/logo <img src="../../../../public/logos/logo_rgba/noWhite/kkyLogoNoWhiteNoText.png" alt="">
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 }"> <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
<logo @click="$router.push('/homePage/index')" v-if="showLogo" :collapse="isCollapse"/> <logo @click="$router.push('/homePage/index')" v-if="showLogo" :collapse="isCollapse"/>
<happy-scroll color="rgba(0,0,0,0.5)" size="5"> <!-- 将 happy-scroll 移到 el-menu 外层，并移除 el-menu 上的固定高度 -->
<el-menu :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText" <happy-scroll color="rgba(0,0,0,0.5)" size="5" class="menu-scroll-container">
:unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" <el-menu
:default-active="$route.path" mode="vertical" :collapse="isCollapse"
style="overflow-y: auto;height: 100vh ;" :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"/> <sidebar-item v-for="(route, index) in permission_routes" :key="index" :item="route" :base-path="route.path"/>
</el-menu> </el-menu>
@ -30,7 +36,7 @@
<script> <script>
import {mapGetters} from "vuex"; import {mapGetters} from "vuex";
import Logo from "./Logo"; import Logo from "./Logo";
import SidebarItem from "./SidebarItem"; import SidebarItem from "./SidebarItem.vue";
import variables from "../../../styles/variables.scss"; import variables from "../../../styles/variables.scss";
export default { export default {
@ -41,17 +47,7 @@ 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
}, },
@ -69,25 +65,78 @@ 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; height: 80px; // Logo区域高度
flex-shrink: 0; // 防止在Flex布局中被压缩
} }
}
::v-deep .happy-scroll { .sidebar-container {
overflow-x: hidden; width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box; // 包含padding/border在width内计算
}
.happy-scroll-container { .menu-scroll-container {
width: 100% !important; 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 { .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,11 +51,10 @@ 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,8 +1554,6 @@ 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 Normal file
View 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;
}

22
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,16 +10,18 @@ $panGreen: #30B08F;
// sidebar // sidebar
$menuText: #000; $menuText: #000;
$menuActiveText: #1b14d9; //当前子菜单的字体颜色 $menuActiveText: #1b14d9; // 当前激活菜单项的文字颜色
$subMenuActiveText: #100101; // https://github.com/ElemeFE/element/issues/12951 $subMenuActiveText: #100101; // 当前激活子菜单项的文字颜色
$menuBg: #fff; //整体背景颜色 $menuBg: #fff; // 整体背景颜色
$menuHover: #f7f7f7; //鼠标浮动一级菜单背景 $menuHover: #f0f0f0; // 鼠标悬浮一级菜单背景色 (轻微变化更友好)
$subMenuBg: #f7f7f7; // 子菜单背景色
$subMenuHover: #eaeaea; // 鼠标悬浮子菜单背景色 (轻微变化更友好)
$subMenuBg: #f7f7f7; //子菜单下拉 $sideBarWidth: 230px; // 侧边栏宽度
$subMenuHover: #0177f8; //鼠标浮动子菜单背景
$sideBarWidth: 230px; // Element UI 默认折叠宽度为 64px
// $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
@ -32,5 +34,9 @@ $sideBarWidth: 230px;
subMenuBg: $subMenuBg; subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover; subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth; sideBarWidth: $sideBarWidth;
// sideBarCollapseWidth: $sideBarCollapseWidth;
} }

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

@ -1,28 +1,26 @@
<template> <template>
<div> <div class="backgroundColor">
<qualificationBox :approveInfo="approveInfo"></qualificationBox> <qualificationBox :approveInfo="approveInfo"></qualificationBox>
</div> </div>
</template> </template>
<script> <script>
import qualificationBox from '../qualificationBox/index.vue'; import qualificationBox from '../qualificationBox/index.vue';
export default { export default {
name: 'apprvedInfo', name: 'apprvedInfo',
components: { components: {
qualificationBox qualificationBox
}, },
data() { data() {
return { return {
approveInfo:{ approveInfo: {
audit_status:"approved,rejected", audit_status: "approved,rejected",
} }
} }
}, },
created(){ created() {
// this.initData() // this.initData()
}, },
} }
</script> </script>
<style scoped> <style scoped></style>
</style>

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

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="backgroundColor">
<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"> <div class="leftTable backgroundColor">
<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> <div class="backgroundColor">
<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>

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

@ -1,5 +1,5 @@
<template> <template>
<div> <div >
<!-- 调试信息 --> <!-- 调试信息 -->
<div style="margin-bottom: 20px; padding: 15px; background: #f5f7fa; border-radius: 8px;"> <div style="margin-bottom: 20px; padding: 15px; background: #f5f7fa; border-radius: 8px;">
<el-button size="small" @click="showDebugInfo">查看调试信息</el-button> <el-button size="small" @click="showDebugInfo">查看调试信息</el-button>

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

@ -2,41 +2,45 @@
<div class="container"> <div class="container">
<el-card> <el-card>
<el-table v-loading="loading" ref="table" :data="tableData" tooltip-effect="dark" style="width: 100%" <el-table v-loading="loading" ref="table" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" height="calc(100vh - 190px)"> @selection-change="handleSelectionChange" height="calc(100vh - 190px)">
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
<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 style="margin-top: 20px; display:flex;"> <div class="button-container">
<el-button @click="selectSales()" size="small" type="primary">选择销售</el-button> <el-button @click="selectSales()" size="small" type="primary" :disabled="!hasSelection" class="action-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">
<el-radio-group v-model="form.id"> <!-- 添加一个容器来应用滚动样式 -->
<div class="radio"> <div class="radio-group-container">
<el-radio :label="item.id" v-for="(item,index) in salesData" :key="index">{{ item.username }}</el-radio> <el-radio-group v-model="form.id">
</div> <div class="radio" v-for="(item, index) in salesData" :key="index">
</el-radio-group> <el-radio :label="item.id">{{ item.username }}</el-radio>
</div>
</el-radio-group>
</div>
</el-form-item> </el-form-item>
</el-form> </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" @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() {
@ -54,111 +58,160 @@ 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.loading = false this.tableData = res.data.rows;
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) => {
let mySales = { return {
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) {
// console.log(val); // 更新选中的客户ID数组
this.customerid = []; this.customerid = val.map(item => item.id); // 更简洁的写法
val.forEach(item => { // 更新是否有选中项的状态
this.customerid.push(item.id) this.hasSelection = this.customerid.length > 0;
}) // 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 = { // 确保至少选择了一个客户和一个销售
customerid: this.customerid,//这个是数组 if (this.customerid.length === 0) {
salemanid: this.form.id//这个是字符串就行 this.$message({
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格式
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> </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; // 单选按钮项的样式（如果需要）
flex-direction: column; margin-bottom: 5px; // 项之间的间距
height: 200px;
width: 200px; &:last-child {
overflow: hidden; margin-bottom: 0; // 最后一项移除下边距
overflow-y: scroll; }
} }
.dialog-footer { .dialog-footer {

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

@ -1,5 +1,5 @@
<template> <template>
<div class="box"> <div class="box backgroundColor">
<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,43 +8,53 @@
: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">
<el-form label-position="left" inline class="demo-table-expand" style="display: flex;flex-wrap: wrap"> <div class="details-container">
<el-form-item style="display: flex;justify-content: flex-start" label="供应商名称："> <div class="details-header">
<span>{{ props.row.orgname }}</span> <h3>供应商详细信息</h3>
</el-form-item> </div>
<el-form-item style="display: flex;justify-content: flex-start" label="起效日期："> <div class="details-content">
<span>{{ props.row.start_date }}</span> <div class="details-row">
</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.description }}</span> <span class="details-value">{{ props.row.orgname }}</span>
</el-form-item> </div>
<el-form-item style="display: flex;justify-content: flex-start" label="失效日期："> <div class="details-item">
<span>{{ props.row.end_date }}</span> <span class="details-label">起效日期：</span>
</el-form-item> <span class="details-value">{{ props.row.start_date }}</span>
<el-form-item style="display: flex;justify-content: flex-start" label="联系人电话："> </div>
<span>{{ props.row.contactor_phone }}</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.description }}</span>
<el-button type="primary" @click="updateProtocol(props.row)" size="mini">修改协议</el-button> </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.emailaddress }}</span> <span class="details-value">{{ props.row.end_date }}</span>
</el-form-item> </div>
<el-form-item style="display: flex;justify-content: flex-start" label="联系地址："> <div class="details-item">
<span>{{ props.row.address }}</span> <span class="details-label">联系人电话：</span>
</el-form-item> <span class="details-value">{{ props.row.contactor_phone }}</span>
<el-form-item style="display: flex;justify-content: flex-start" label="主营业务描述："> </div>
<span>{{ props.row.main_business }}</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.emailaddress }}</span>
v-if="props.row.salemode == 1"> </div>
<el-button type="primary" @click="rpRebateCtlDialogVisibleTrue(props.row)" size="mini">添加回佣 <div class="details-item">
</el-button> <span class="details-label">联系地址：</span>
</el-form-item> <span class="details-value">{{ props.row.address }}</span>
<el-form-item style="display: flex;justify-content: flex-start" label="产品导入:"> </div>
<el-button type="primary" size="mini" @click="addProductExcel(props.row)">批量导入产品</el-button> <div class="details-item">
</el-form-item> <span class="details-label">主营业务描述：</span>
</el-form> <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="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-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%">
@ -264,7 +274,8 @@
<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;
@ -1119,6 +1130,8 @@ 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);
@ -1392,4 +1405,73 @@ 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>

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

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

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

@ -23,9 +23,10 @@
<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></div> <span>光速网卡：Mellanox ConnectX-5 Lx 25G SFP28 2-port</span>
</div>
<div class="butBox"> <div class="butBox">
<span class="buyBtn" @click="dialogVisibleMy= true"> 立即购买</span> <span class="buyBtn" @click="dialogVisibleMy = true"> 立即购买</span>
</div> </div>
</div> </div>
@ -35,12 +36,12 @@
</div> </div>
<el-dialog title="联系我们" :visible.sync="dialogVisibleMy" width="500px" :append-to-body="true" <el-dialog title="联系我们" :visible.sync="dialogVisibleMy" width="500px" :append-to-body="true"
custom-class="contentStyle" :close-on-click-modal="false"> custom-class="contentStyle" :close-on-click-modal="false">
<contactUs></contactUs> <contactUs></contactUs>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisibleMy = false" <el-button type="primary" @click="dialogVisibleMy = false"
style="background-color: #0007d4;padding: 5px">我已知晓</el-button> style="background-color: #0007d4;padding: 5px">我已知晓</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- 公有云--> <!-- 公有云-->
<!-- 京东--> <!-- 京东-->
@ -51,13 +52,13 @@
<li :class="{ activeTagStyle: currentTag === '2' }" style="width: 250px;" @click="clickTag('2')"> <li :class="{ activeTagStyle: currentTag === '2' }" style="width: 250px;" @click="clickTag('2')">
<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_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 class="hmc3nico"><img height="180" </div>
src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_2.png" <div class="hmc3nico"><img height="180"
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">-->
<!-- <span class="mhmc2ico">--> <!-- <span class="mhmc2ico">-->
@ -70,25 +71,22 @@
<p style="font-size: 14px;width: 100%;padding: 0 5px"> <p style="font-size: 14px;width: 100%;padding: 0 5px">
高效、易用、丰富的GPU算力AI助力产业升级</p> 高效、易用、丰富的GPU算力AI助力产业升级</p>
<span class="hmc1_lm">了解详情 <span class="hmc1_lm">了解详情
<i>&gt;</i> <i>&gt;</i>
</span> </span>
</a> </a>
</li> </li>
<li :class="{ activeTagStyle: currentTag === '1' }" style="width: 250px;" <li :class="{ activeTagStyle: currentTag === '1' }" style="width: 250px;" @click=" clickTag('1')">
@click=" clickTag('1') ">
<a class="hmc1a aniIconBtn"> <a class="hmc1a aniIconBtn">
<div class="dsPcPad"> <div class="dsPcPad">
<span class="hmc1icon" <span class="hmc1icon" style="position: relative;height: 150px">
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" src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_1.png" width="180"></div>
width="180"></div> </span>
</span>
</div> </div>
<!-- <div class="dsPhone">--> <!-- <div class="dsPhone">-->
<!-- <span class="mhmc2ico">--> <!-- <span class="mhmc2ico">-->
@ -101,30 +99,30 @@
<p style="font-size: 14px;width: 100%;padding: 0 5px"> <p style="font-size: 14px;width: 100%;padding: 0 5px">
整合各大超算中心计算资源让用户像用电一样方便地使用资源</p> 整合各大超算中心计算资源让用户像用电一样方便地使用资源</p>
<span class="hmc1_lm">了解详情 <span class="hmc1_lm">了解详情
<i>&gt;</i> <i>&gt;</i>
</span> </span>
</a> </a>
</li> </li>
<li :class="{ activeTagStyle: currentTag === '3' }" style="width: 250px;" @click="clickTag('3')"> <li :class="{ activeTagStyle: currentTag === '3' }" style="width: 250px;" @click="clickTag('3')">
<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_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" <div class="hmc3nico"><img height="180"
src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_3.png" src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_3.png" width="180"></div>
width="180"></div> </span>
</span>
</div> </div>
<strong style="margin-top:25px">公有云</strong> <strong style="margin-top:25px">公有云</strong>
<p class="mobile-description" style="font-size: 14px;width: 100%;padding: 0 10px"> <p class="mobile-description" style="font-size: 14px;width: 100%;padding: 0 10px">
提供高质量算力网络出口带宽、传输</p> 提供高质量算力网络出口带宽、传输</p>
<span class="hmc1_lm">了解详情 <span class="hmc1_lm">了解详情
<i>&gt;</i> <i>&gt;</i>
</span> </span>
</a> </a>
</li> </li>
</ul> </ul>
@ -145,9 +143,8 @@
</div> </div>
<div class="new-nav"> <div class="new-nav">
<ul class="nav-ul"> <ul class="nav-ul">
<li <li :class="{ navLi: item.name === currentTitle }" @click="mouseOver($event, item)"
:class="{ navLi: item.name === currentTitle }" v-for="(item, index) in menuArr" :key="item.name">
@click="mouseOver($event,item)" v-for="(item,index) in menuArr" :key="item.name">
<div> <div>
{{ item.name }} {{ item.name }}
</div> </div>
@ -168,30 +165,30 @@
<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"><h3><span class="LLZ9Q8FX">{{ item.product_name }} </span></h3> <div class="__9uUkOV59">
<p class="xQ1YIHP8">{{ item.description }}</p></div> <h3><span class="LLZ9Q8FX">{{ item.product_name }} </span></h3>
<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" <div v-for="(itemOne, index) in JSON.parse(JSON.stringify(item.tags))" :key="index" class="_dDwK_qk">
class="_dDwK_qk"><span>{{ <span>{{
itemOne itemOne
}}</span> }}</span>
</div> </div>
</div> </div>
<div v-if="item.discount" class="n2sHMecG" <div v-if="item.discount" class="n2sHMecG"
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">{{
item.discount
}} </span>
<span class="__1wQVatn_ cB_ePAPu XeaRmkQC" <span class="__1wQVatn_ cB_ePAPu XeaRmkQC"
style="display:inline-block;margin: 0 3px">{{ style="align-self:flex-end;display:inline-block;font-size: 14px">折起</span>
item.discount
}} </span>
<span class="__1wQVatn_ cB_ePAPu XeaRmkQC"
style="align-self:flex-end;display:inline-block;font-size: 14px">折起</span>
</div> </div>
</a> </a>
</li> </li>
@ -208,7 +205,7 @@
<cloud-item :product_data="bd_data" style="width: 700px;"></cloud-item> <cloud-item :product_data="bd_data" style="width: 700px;"></cloud-item>
</div> </div>
<div v-if="false" class="showMore"> <div v-if="false" class="showMore">
<el-button style="padding: 5px 10px" v-if="!showMoreFlag" type="primary" @click="showMoreFlag=true">查看更多 <el-button style="padding: 5px 10px" v-if="!showMoreFlag" type="primary" @click="showMoreFlag = true">查看更多
</el-button> </el-button>
<div v-else style="display: flex"> <div v-else style="display: flex">
<cloud-item :product_data="cap_data" style="width: 700px;"></cloud-item> <cloud-item :product_data="cap_data" style="width: 700px;"></cloud-item>
@ -231,14 +228,14 @@ import SupercomputingItem from "@/views/product/productHome/productIndex/superco
import Carousel from './carousel/index.vue' import Carousel from './carousel/index.vue'
import HeaderTiao from "@/views/product/productHome/productIndex/headerTiao/index.vue"; import HeaderTiao from "@/views/product/productHome/productIndex/headerTiao/index.vue";
import FooterBox from "@/views/product/productHome/productIndex/FooterBox/index.vue"; import FooterBox from "@/views/product/productHome/productIndex/FooterBox/index.vue";
import {reqHotProductList} from "@/api/product/product"; import { reqHotProductList } from "@/api/product/product";
import {bdProducts, jdProducts} from "@/views/product/productionData"; import { bdProducts, jdProducts } from "@/views/product/productionData";
import contactUs from "@/views/product/productHome/components/contactUs/index.vue"; import contactUs from "@/views/product/productHome/components/contactUs/index.vue";
import MainPage from "@/views/product/mainPage/index.vue"; import MainPage from "@/views/product/mainPage/index.vue";
export default { export default {
name: "productIndex", name: "productIndex",
components: {MainPage, contactUs, FooterBox, HeaderTiao, SupercomputingItem, CloudItem, Carousel}, components: { MainPage, contactUs, FooterBox, HeaderTiao, SupercomputingItem, CloudItem, Carousel },
data() { data() {
return { return {
dialogVisibleMy: false, dialogVisibleMy: false,
@ -247,14 +244,14 @@ export default {
currentTag: '2', currentTag: '2',
//菜单 //菜单
menuArr: [ menuArr: [
{name: '热门产品', tag: '', tag2: ''}, { name: '热门产品', tag: '', tag2: '' },
{name: '计算', tag: '集群节点一', tag2: '云主机'}, { name: '计算', tag: '集群节点一', tag2: '云主机' },
{name: '网络', tag: 'DDos', tag2: '负载均衡'}, { name: '网络', tag: 'DDos', tag2: '负载均衡' },
{name: '存储', tag: '云磁盘', tag2: '文件存储'}, { name: '存储', tag: '云磁盘', tag2: '文件存储' },
{name: '安全', tag: '云防火墙', tag2: '风险识别'}, { name: '安全', tag: '云防火墙', tag2: '风险识别' },
{name: '数据库', tag: '数据库审计', tag2: '数据库备份DBS'}, { name: '数据库', tag: '数据库审计', tag2: '数据库备份DBS' },
{name: 'AI能力引擎', tag: '文字识别', tag2: '人脸识别'}, { name: 'AI能力引擎', tag: '文字识别', tag2: '人脸识别' },
], ],
currentData: [], currentData: [],
@ -640,38 +637,38 @@ export default {
currentTitle: '热门产品', currentTitle: '热门产品',
//公有云京东推荐产品列表 //公有云京东推荐产品列表
jd_data: jd_data:
{ {
title: '京东产品推荐', title: '京东产品推荐',
moreProductDescription: moreProductDescription:
'京东技术最佳实践，助力产业互联！', '京东技术最佳实践，助力产业互联！',
products: products:
[ [
{ {
product_name: '弹性公网IP ', product_name: '弹性公网IP ',
description: '可与云主机 CVM、负载均衡 LB、原生容器 NC、弹性网卡 ENI 等灵活绑定与解绑', description: '可与云主机 CVM、负载均衡 LB、原生容器 NC、弹性网卡 ENI 等灵活绑定与解绑',
tags: ['EIP/弹性', 'IP地址'], tags: ['EIP/弹性', 'IP地址'],
discount: '7.5' discount: '7.5'
}, },
{ {
product_name: '云主机', product_name: '云主机',
description: '云主机(CVM，云虚拟机)是一种管理便捷、安全稳定的弹性计算服务', description: '云主机(CVM，云虚拟机)是一种管理便捷、安全稳定的弹性计算服务',
tags: ['随时扩展', '节约成本'], tags: ['随时扩展', '节约成本'],
discount: '7' discount: '7'
}, },
{ {
product_name: '负载均衡', product_name: '负载均衡',
description: '管理便捷的流量分发服务。访问流量经由 LB 可自动分发至多台服务器上，提高系统的可用性并扩展服务能力', description: '管理便捷的流量分发服务。访问流量经由 LB 可自动分发至多台服务器上，提高系统的可用性并扩展服务能力',
tags: [], tags: [],
discount: '7.5' discount: '7.5'
}, },
{ {
product_name: '容器镜像仓库', product_name: '容器镜像仓库',
description: '库伯奈特(Kubernetes)集群服务无缝集成，为基于容器的应用提供一站式部署服务', description: '库伯奈特(Kubernetes)集群服务无缝集成，为基于容器的应用提供一站式部署服务',
tags: ['容器镜像存储'], tags: ['容器镜像存储'],
discount: '7' discount: '7'
} }
] ]
} }
, ,
//公有云百度推荐产品列表 //公有云百度推荐产品列表
bd_data: { bd_data: {
@ -1054,9 +1051,7 @@ export default {
background-color: white; background-color: white;
} }
.all-cloud { .all-cloud {}
}
.cloud-header { .cloud-header {
display: flex; display: flex;
@ -1070,9 +1065,7 @@ export default {
flex-direction: column; flex-direction: column;
} }
.jd-box { .jd-box {}
}
.all-cloud-item { .all-cloud-item {
display: flex; display: flex;
@ -1163,20 +1156,23 @@ 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 {
@ -1257,6 +1253,7 @@ 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;
@ -1327,7 +1324,8 @@ 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;
/* 控制最大行数 */
} }
* { * {
@ -1444,6 +1442,7 @@ a:hover {
.myDivider { .myDivider {
display: none; display: none;
} }
.new-nav { .new-nav {
padding: 0 !important; padding: 0 !important;
display: flex; display: flex;
@ -1467,9 +1466,12 @@ 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;