Merge branch 'main' of https://git.opencomputing.cn/yumoqing/kboss
This commit is contained in:
ping
commit
ade5722e91
@ -54,6 +54,24 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">右箭头</div>
|
||||
<div class="code-name">&#xe624;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">上</div>
|
||||
<div class="code-name">&#xe63c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">下</div>
|
||||
<div class="code-name">&#xe63d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">购物车空</div>
|
||||
@ -156,9 +174,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1781579680075') format('woff2'),
|
||||
url('iconfont.woff?t=1781579680075') format('woff'),
|
||||
url('iconfont.ttf?t=1781579680075') format('truetype');
|
||||
src: url('iconfont.woff2?t=1782877614448') format('woff2'),
|
||||
url('iconfont.woff?t=1782877614448') format('woff'),
|
||||
url('iconfont.ttf?t=1782877614448') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@ -184,6 +202,33 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-youjiantou"></span>
|
||||
<div class="name">
|
||||
右箭头
|
||||
</div>
|
||||
<div class="code-name">.icon-youjiantou
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-shang"></span>
|
||||
<div class="name">
|
||||
上
|
||||
</div>
|
||||
<div class="code-name">.icon-shang
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-xia"></span>
|
||||
<div class="name">
|
||||
下
|
||||
</div>
|
||||
<div class="code-name">.icon-xia
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-gouwuchekong"></span>
|
||||
<div class="name">
|
||||
@ -337,6 +382,30 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-youjiantou"></use>
|
||||
</svg>
|
||||
<div class="name">右箭头</div>
|
||||
<div class="code-name">#icon-youjiantou</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shang"></use>
|
||||
</svg>
|
||||
<div class="name">上</div>
|
||||
<div class="code-name">#icon-shang</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xia"></use>
|
||||
</svg>
|
||||
<div class="name">下</div>
|
||||
<div class="code-name">#icon-xia</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-gouwuchekong"></use>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 5043107 */
|
||||
src: url('iconfont.woff2?t=1781579680075') format('woff2'),
|
||||
url('iconfont.woff?t=1781579680075') format('woff'),
|
||||
url('iconfont.ttf?t=1781579680075') format('truetype');
|
||||
src: url('iconfont.woff2?t=1782877614448') format('woff2'),
|
||||
url('iconfont.woff?t=1782877614448') format('woff'),
|
||||
url('iconfont.ttf?t=1782877614448') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,18 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-youjiantou:before {
|
||||
content: "\e624";
|
||||
}
|
||||
|
||||
.icon-shang:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.icon-xia:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.icon-gouwuchekong:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,27 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "1304892",
|
||||
"name": "右箭头",
|
||||
"font_class": "youjiantou",
|
||||
"unicode": "e624",
|
||||
"unicode_decimal": 58916
|
||||
},
|
||||
{
|
||||
"icon_id": "1305406",
|
||||
"name": "上",
|
||||
"font_class": "shang",
|
||||
"unicode": "e63c",
|
||||
"unicode_decimal": 58940
|
||||
},
|
||||
{
|
||||
"icon_id": "1305407",
|
||||
"name": "下",
|
||||
"font_class": "xia",
|
||||
"unicode": "e63d",
|
||||
"unicode_decimal": 58941
|
||||
},
|
||||
{
|
||||
"icon_id": "1306",
|
||||
"name": "购物车空",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
f/web-kboss/src/assets/image/bgimg.png
Normal file
BIN
f/web-kboss/src/assets/image/bgimg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
@ -6,153 +6,16 @@
|
||||
|
||||
<transition name="slide">
|
||||
<div v-show="windowsHidden" style="font-size: 14px">
|
||||
<div class="new-floating" style="z-index: 99;">
|
||||
<img src="./img/head.png" alt="">
|
||||
<div class="cloud-contact-us " @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
|
||||
<!-- <span class="cloud-contact-us-i"></span>-->
|
||||
<span> 售</span>
|
||||
<span> 前</span>
|
||||
<span> 咨</span>
|
||||
<span> 询</span>
|
||||
</div>
|
||||
<!-- <div class="cart-entry-wrapper" @click="tryUse">-->
|
||||
<!-- <el-tooltip class="item" effect="light" content="申请试用" placement="left">-->
|
||||
<!-- <div class="cart-entry">-->
|
||||
<!-- <span class="cart-icon"></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-tooltip>-->
|
||||
|
||||
<!-- </div>-->
|
||||
<div @click="open2"
|
||||
|
||||
style="position:absolute;bottom:-40px;display: flex;justify-content: center;align-items: center;cursor: pointer">
|
||||
<!-- 摄像头 -->
|
||||
<!-- <el-tooltip v-if="getHomePath()!=='/ncmatchHome/index'" class="item" effect="light" content="联系销售" placement="left">
|
||||
<span class="el-icon-video-camera"
|
||||
style="font-weight: 550;font-size: 22px;"></span>
|
||||
</el-tooltip> -->
|
||||
|
||||
<!-- </div>-->
|
||||
<!-- <div class="cart-entry-wrapper" style="visibility: visible;">-->
|
||||
<!-- <div class="cart-entry" data-track-category="购物车浮层" data-track-name="入口点击"-->
|
||||
<!-- data-track-action="click"><span class="cart-icon"></span></div>-->
|
||||
<!-- <span class="cart-icon"></span>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="floating-box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"-->
|
||||
<!-- style="cursor: default;">-->
|
||||
<!-- <span>联系我们</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="floating-box1" @click="tryUse">-->
|
||||
|
||||
<!-- <span>申请试用</span>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
|
||||
<!-- <transition name="slide">-->
|
||||
<!-- <div v-show="windowsHidden">-->
|
||||
<!-- <div class="floating-box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"-->
|
||||
<!-- style="cursor: default;">-->
|
||||
<!-- <i class="el-icon-s-comment"></i>-->
|
||||
<!-- <span>联系我们</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="floating-box1" @click="tryUse">-->
|
||||
<!-- <i class="el-icon-s-order"></i>-->
|
||||
<!-- <span>申请试用</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </transition>-->
|
||||
|
||||
<div v-if="false" @click="windowsHidden=!windowsHidden" class="floating-box1 hiddenBtn"
|
||||
style="width: 50px;height: 50px;border-radius:50%;bottom: 30px;background-color: #f1e9e9;color: blue">
|
||||
<i class="el-icon-arrow-right" style="color: blue" v-show="windowsHidden"></i>
|
||||
<i class="el-icon-arrow-left" style="color: blue" v-show="!windowsHidden"></i>
|
||||
</div>
|
||||
|
||||
|
||||
<transition name="el-zoom-in-top">
|
||||
<!--isShow&&windowsHidden -->
|
||||
<div v-show="isShow&&windowsHidden" class="cloud-contact-us-spread-container" style="z-index: 9">
|
||||
<ul class="cloud-contact-us-spread" style="padding-left: 15px;">
|
||||
<li class="cloud-contact-us-tel" style="height: 90px;">
|
||||
<div style="display: flex;justify-content: center;align-items: center;padding-top: 15px">
|
||||
<div data-track-action="click" data-track-category="右侧公共悬浮区" data-track-name="售前咨询"
|
||||
data-agl-cvt="5"
|
||||
style="height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
|
||||
<div
|
||||
style="margin-left: -50px;width: 100px;height: 30px;display: flex;justify-content: center;align-items: center">
|
||||
<span style="margin-right: 5px;margin-top: 17px;height: 35px;"
|
||||
class="cloud-contact-us-icon"></span>
|
||||
<p class="cloud-contact-us-tit" style="font-size: 14px;">售前咨询</p>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;align-items: center;"
|
||||
>
|
||||
<div v-if="!phone"
|
||||
style="width: 80px;height: 25px;display: flex!important;justify-content: center;align-items: center">
|
||||
<el-skeleton
|
||||
style="width: 100%;padding: 0;margin: 0;height: 100%;margin-top: -25px"
|
||||
:rows="1"
|
||||
animated/>
|
||||
</div>
|
||||
<p v-else class="cloud-contact-us-con" style="font-size: 12px;height: 20px;margin-top: 5px">
|
||||
{{ phone }}</p></div>
|
||||
</div>
|
||||
<div v-if="false" style="width: 90px;height: 90px;">
|
||||
<div class="img"
|
||||
style="width: 90px;height: 90px; display: flex;justify-content: center;align-items: center"
|
||||
>
|
||||
<el-skeleton style="width: 80px;height: 80px;" :loading="loading" animated
|
||||
v-if="isShowPicLoading">
|
||||
<template slot="template">
|
||||
<el-skeleton-item
|
||||
variant="image"
|
||||
style="width: 80px; height:80px ;"
|
||||
/>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
<img style="width: 80px;height: 80px;" v-else @load="onImageLoad" :src="src" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="floating-consult">
|
||||
<a href="#" class="floating-consult-btn primary" @click.prevent="openAiConsult">
|
||||
<div class="floating-consult-icon">
|
||||
<img src="./img/ocai.jpg" alt="在线咨询">
|
||||
<span class="consult-badge"></span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<span class="floating-consult-text">在线咨询</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="dialog" v-if="false"-->
|
||||
<!-- style="display: flex;justify-content: space-around;">-->
|
||||
<!-- <div class="phone">-->
|
||||
<!-- <span class="sonOne">业务咨询</span>-->
|
||||
<!-- <span class="sonTwo">生态合作总监</span>-->
|
||||
<!-- <span class="sonThree" style="display: flex;">-->
|
||||
<!-- 电话:-->
|
||||
<!-- <el-skeleton style="width: 120px" animated v-if="isShowPicLoading">-->
|
||||
<!-- <template slot="template">-->
|
||||
<!-- <el-skeleton-item variant="image" style="width: 70px; height: 20px;"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-skeleton>-->
|
||||
<!-- <span v-else>{{ phone }}</span>-->
|
||||
|
||||
<!-- </span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="img" style="display: flex;justify-content: center;align-items: center"-->
|
||||
<!-- >-->
|
||||
<!-- <el-skeleton style="width: 100%" :loading="loading" animated v-if="isShowPicLoading">-->
|
||||
<!-- <template slot="template">-->
|
||||
<!-- <el-skeleton-item-->
|
||||
<!-- variant="image"-->
|
||||
<!-- style="width: 100px; height:100px ;"-->
|
||||
<!-- />-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-skeleton>-->
|
||||
<!-- <img v-else @load="onImageLoad" :src="src" alt="">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</transition>
|
||||
|
||||
|
||||
@ -381,6 +244,9 @@ export default {
|
||||
open2() {
|
||||
this.isShowChangeChat = true
|
||||
},
|
||||
openAiConsult() {
|
||||
window.dispatchEvent(new CustomEvent('kboss-open-ai-chat'))
|
||||
},
|
||||
//关闭弹窗
|
||||
closeWindow() {
|
||||
this.isShowChangeChat = false
|
||||
@ -967,10 +833,6 @@ export default {
|
||||
margin-top: 2px;
|
||||
width: 20px;
|
||||
background-position: -100px 0;
|
||||
|
||||
&:hover {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-video-camera {
|
||||
@ -1014,6 +876,67 @@ export default {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.floating-consult {
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
bottom: 128px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.floating-consult-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.floating-consult-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.floating-consult-btn.primary {
|
||||
width: 56px;
|
||||
padding: 12px 8px;
|
||||
border-radius: 28px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.floating-consult-icon {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.floating-consult-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.consult-badge {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.floating-consult-text {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
font-size: 12px;
|
||||
color: #1f2937;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style>
|
||||
|
||||
BIN
f/web-kboss/src/components/FloatingBox/img/ocai.jpg
Normal file
BIN
f/web-kboss/src/components/FloatingBox/img/ocai.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
@ -790,4 +790,228 @@ export default {
|
||||
::v-deep .el-drawer__body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 新版站内信视觉优化 */
|
||||
.drawer,
|
||||
.drawerMobile {
|
||||
::v-deep .el-drawer {
|
||||
background: #f5f8ff;
|
||||
box-shadow: -18px 0 48px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
::v-deep .el-drawer {
|
||||
width: 64% !important;
|
||||
min-width: 860px;
|
||||
border-radius: 24px 0 0 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.drawerMobile {
|
||||
::v-deep .el-drawer {
|
||||
border-radius: 18px 0 0 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer ::v-deep .el-container,
|
||||
.drawerMobile ::v-deep .el-container {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.aside {
|
||||
background: linear-gradient(180deg, #eef5ff 0%, #f8fbff 100%) !important;
|
||||
border-right: 1px solid #e4ecf7;
|
||||
|
||||
.header {
|
||||
height: 78px !important;
|
||||
padding-left: 26px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: transparent !important;
|
||||
border-bottom: 0 !important;
|
||||
color: #111827;
|
||||
font-size: 20px !important;
|
||||
line-height: 1.3 !important;
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 8px 14px;
|
||||
|
||||
div {
|
||||
height: 44px !important;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 16px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
color: #5f6b7a;
|
||||
font-size: 15px !important;
|
||||
line-height: 44px !important;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(30, 111, 255, 0.08) !important;
|
||||
color: #1e6fff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 10px 24px rgba(39, 90, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_box {
|
||||
padding: 22px 26px !important;
|
||||
background: #f8fbff !important;
|
||||
|
||||
.header {
|
||||
height: auto !important;
|
||||
padding: 0 0 18px !important;
|
||||
border-bottom: 0 !important;
|
||||
color: #111827 !important;
|
||||
font-size: 24px !important;
|
||||
line-height: 1.35 !important;
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-bottom: 16px !important;
|
||||
padding: 14px 16px !important;
|
||||
display: flex !important;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
border: 1px solid #edf1f7 !important;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 10px 28px rgba(31, 45, 61, 0.05);
|
||||
}
|
||||
|
||||
.msgtext {
|
||||
margin: 4px 12px 12px;
|
||||
padding: 16px 18px !important;
|
||||
border: 1px solid #e8eef7;
|
||||
border-radius: 14px !important;
|
||||
background: #f7faff !important;
|
||||
color: #4b5563 !important;
|
||||
font-size: 14px;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary {
|
||||
border-color: transparent;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
}
|
||||
|
||||
::v-deep .el-button--danger {
|
||||
border-color: #fee2e2;
|
||||
background: #fff5f5;
|
||||
color: #ef4444;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: #fecaca;
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 32px rgba(31, 45, 61, 0.06);
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f4f8ff !important;
|
||||
color: #4b5563;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #edf1f7;
|
||||
color: #344054;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
transition: background 0.2s ease;
|
||||
|
||||
&:hover > td {
|
||||
background: #f7faff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__expanded-cell {
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .unReadColor td {
|
||||
background: #eef5ff !important;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
|
||||
&:first-child {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 4px;
|
||||
height: 28px;
|
||||
border-radius: 0 999px 999px 0;
|
||||
background: #1e6fff;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content_box {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.aside {
|
||||
.header {
|
||||
height: 64px !important;
|
||||
padding-left: 14px !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 6px 8px;
|
||||
|
||||
div {
|
||||
height: 40px !important;
|
||||
padding-left: 10px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -730,6 +730,11 @@ export default {
|
||||
this.editUserInfoDialog = false;
|
||||
},
|
||||
async logout() {
|
||||
let redirectPath = ''
|
||||
if (this.$route && this.$route.fullPath && !this.$route.fullPath.includes('/login')) {
|
||||
redirectPath = this.$route.fullPath
|
||||
sessionStorage.setItem('loginRedirectPath', redirectPath)
|
||||
}
|
||||
store.commit('tagsView/resetBreadcrumbState');
|
||||
store.commit('permission/RESET_ROUTES');
|
||||
sessionStorage.removeItem("auths");
|
||||
@ -750,7 +755,10 @@ export default {
|
||||
localStorage.removeItem("org_type")
|
||||
sessionStorage.removeItem('userId')
|
||||
this.$store.commit('setLoginState', false)
|
||||
await this.$router.push(getHomePath());
|
||||
await this.$router.push({
|
||||
path: '/login',
|
||||
query: redirectPath ? { redirect: redirectPath } : {}
|
||||
});
|
||||
},
|
||||
async logout1() {
|
||||
logoutAPI().then((res) => {
|
||||
|
||||
@ -3,7 +3,7 @@ import Vue from 'vue'
|
||||
import Cookies from 'js-cookie'
|
||||
import 'normalize.css/normalize.css' // a modern alternative to CSS resets
|
||||
|
||||
import './assets/css/iconfont/iconfont.css'
|
||||
import '@/assets/css/iconfont/iconfont.css'
|
||||
|
||||
import Element from 'element-ui'
|
||||
import './styles/element-variables.scss'
|
||||
|
||||
@ -148,6 +148,9 @@ router.beforeEach(async (to, from, next) => {
|
||||
}
|
||||
// next(`/login?redirect=${to.path}`);
|
||||
console.log("路由执行了2@@@")
|
||||
if (to.fullPath && !to.fullPath.includes('/login')) {
|
||||
sessionStorage.setItem('loginRedirectPath', to.fullPath)
|
||||
}
|
||||
next(homePath)
|
||||
// next(`/beforeLogin`);
|
||||
// console.log("111行被打印了")
|
||||
@ -177,6 +180,9 @@ router.beforeEach(async (to, from, next) => {
|
||||
// console.log(error);
|
||||
Message.error(error || "Has Error");
|
||||
// next(`/login?redirect=${to.path}`);
|
||||
if (to.fullPath && !to.fullPath.includes('/login')) {
|
||||
sessionStorage.setItem('loginRedirectPath', to.fullPath)
|
||||
}
|
||||
next(homePath)
|
||||
// console.log("137行被打印了")
|
||||
NProgress.done();
|
||||
|
||||
@ -65,7 +65,13 @@ export const constantRoutes = [
|
||||
{
|
||||
path: "/tokenMarket",
|
||||
name: "PublicTokenMarket",
|
||||
component: () => import('@/views/product/allProduct/index.vue'),
|
||||
redirect: to => ({
|
||||
path: "/homePage/tokenMarket",
|
||||
query: {
|
||||
category: to.query.category || "TOKEN市集",
|
||||
single: to.query.single || "1",
|
||||
}
|
||||
}),
|
||||
hidden: true,
|
||||
meta: {
|
||||
title: "TOKEN市集",
|
||||
@ -337,6 +343,12 @@ export const constantRoutes = [
|
||||
name: "homePageIndex",
|
||||
hidden: true,
|
||||
meta: { title: "首页", onCache: true },
|
||||
}, {
|
||||
path: "opc",
|
||||
component: () => import("@/views/homePage/mainPage/OPC/index.vue"),
|
||||
name: "homePageOPC",
|
||||
hidden: true,
|
||||
meta: { title: "OPC公共服务平台", onCache: true },
|
||||
}, {
|
||||
path: "computeMarket",
|
||||
component: () => import("@/views/homePage/computeMarket/index.vue"),
|
||||
@ -355,6 +367,12 @@ export const constantRoutes = [
|
||||
name: "trainPlatform",
|
||||
hidden: true,
|
||||
meta: { title: "训推平台", onCache: true },
|
||||
}, {
|
||||
path: "tokenMarket",
|
||||
component: () => import("@/views/product/allProduct/index.vue"),
|
||||
name: "homePageTokenMarket",
|
||||
hidden: true,
|
||||
meta: { title: "TOKEN市集", onCache: true },
|
||||
}, {
|
||||
path: "agentStore",
|
||||
component: () => import("@/views/homePage/agentStore"),
|
||||
@ -367,6 +385,12 @@ export const constantRoutes = [
|
||||
name: "agentStoreDecisionCase",
|
||||
hidden: true,
|
||||
meta: { title: "投策智能体案例", onCache: true },
|
||||
}, {
|
||||
path: "agentStore/contractCase",
|
||||
component: () => import("@/views/homePage/agentStore/contractCase.vue"),
|
||||
name: "agentStoreContractCase",
|
||||
hidden: true,
|
||||
meta: { title: "合同智能审查案例", onCache: true },
|
||||
}, {
|
||||
path: "detail",
|
||||
component: () => import("@/views/homePage/detail/index.vue"),
|
||||
@ -769,6 +793,13 @@ export const asyncRoutes = [
|
||||
hidden: true,
|
||||
meta: { title: "首页", fullPath: "/homePage/index" },
|
||||
},
|
||||
{
|
||||
path: "opc",
|
||||
component: () => import("@/views/homePage/mainPage/OPC/index.vue"),
|
||||
name: "homePageOPC",
|
||||
hidden: true,
|
||||
meta: { title: "OPC公共服务平台", fullPath: "/homePage/opc" },
|
||||
},
|
||||
{
|
||||
path: "detail",
|
||||
component: () => import("@/views/homePage/detail/index.vue"),
|
||||
|
||||
@ -44,6 +44,14 @@ if (window.location.href.includes("dev.opencomputing.cn")) {
|
||||
console.log("环境的前缀时" + testUrl); // 应该输出 'https://www.kaiyuancloud.cn/dev'
|
||||
let isRedirectingToLogin = false
|
||||
|
||||
const saveLoginRedirectPath = () => {
|
||||
const currentRoute = router.currentRoute
|
||||
const fullPath = currentRoute && currentRoute.fullPath
|
||||
if (fullPath && !fullPath.includes('/login')) {
|
||||
sessionStorage.setItem('loginRedirectPath', fullPath)
|
||||
}
|
||||
}
|
||||
|
||||
const getErrorStatus = (error) => {
|
||||
if (error && error.response && error.response.status) {
|
||||
return Number(error.response.status)
|
||||
@ -155,6 +163,7 @@ service.interceptors.response.use(
|
||||
if (code == 401) {
|
||||
if (!isRedirectingToLogin) {
|
||||
isRedirectingToLogin = true
|
||||
saveLoginRedirectPath()
|
||||
showErrorMessage('登录已过期，请重新登录')
|
||||
router.push({path: '/login'}).finally(() => {
|
||||
isRedirectingToLogin = false
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<div class="about-page" style="width: 100%;">
|
||||
<!-- Banner部分 -->
|
||||
<div class="banner">
|
||||
<div v-if="JSON.stringify(logoInfoNew) !== '{}'" style="font-size: 38px;">
|
||||
|
||||
@ -418,6 +418,54 @@
|
||||
background: linear-gradient(to bottom right, #a855f7, #9333ea);
|
||||
}
|
||||
|
||||
.decor-gradient-emerald {
|
||||
background: linear-gradient(to bottom right, #d1fae5, #ecfdf5);
|
||||
}
|
||||
|
||||
.icon-gradient-emerald {
|
||||
background: linear-gradient(to bottom right, #10b981, #059669);
|
||||
}
|
||||
|
||||
.decor-gradient-red {
|
||||
background: linear-gradient(to bottom right, #fee2e2, #fef2f2);
|
||||
}
|
||||
|
||||
.icon-gradient-red {
|
||||
background: linear-gradient(to bottom right, #ef4444, #dc2626);
|
||||
}
|
||||
|
||||
.decor-gradient-cyan {
|
||||
background: linear-gradient(to bottom right, #cffafe, #ecfeff);
|
||||
}
|
||||
|
||||
.icon-gradient-cyan {
|
||||
background: linear-gradient(to bottom right, #06b6d4, #0891b2);
|
||||
}
|
||||
|
||||
.decor-gradient-orange {
|
||||
background: linear-gradient(to bottom right, #ffedd5, #fff7ed);
|
||||
}
|
||||
|
||||
.icon-gradient-orange {
|
||||
background: linear-gradient(to bottom right, #f97316, #ea580c);
|
||||
}
|
||||
|
||||
.decor-gradient-teal {
|
||||
background: linear-gradient(to bottom right, #ccfbf1, #f0fdfa);
|
||||
}
|
||||
|
||||
.icon-gradient-teal {
|
||||
background: linear-gradient(to bottom right, #14b8a6, #0d9488);
|
||||
}
|
||||
|
||||
.decor-gradient-pink {
|
||||
background: linear-gradient(to bottom right, #fce7f3, #fdf2f8);
|
||||
}
|
||||
|
||||
.icon-gradient-pink {
|
||||
background: linear-gradient(to bottom right, #ec4899, #db2777);
|
||||
}
|
||||
|
||||
@keyframes floating {
|
||||
0%,
|
||||
100% {
|
||||
|
||||
911
f/web-kboss/src/views/homePage/agentStore/contractCase.vue
Normal file
911
f/web-kboss/src/views/homePage/agentStore/contractCase.vue
Normal file
@ -0,0 +1,911 @@
|
||||
<template>
|
||||
<div class="contract-case-page" :class="{ 'has-fixed-tabs': isTabsFixed }">
|
||||
<div class="decor decor--blue"></div>
|
||||
<div class="decor decor--purple"></div>
|
||||
|
||||
<section class="case-hero" :style="{ backgroundImage: `url(${bannerImg})` }">
|
||||
<div class="case-container">
|
||||
<div class="case-hero__content">
|
||||
<h1>合同智能审查</h1>
|
||||
<p>
|
||||
面向企业法务与业务签约全流程的专业审查智能体，聚合法规条文、企业内部风控标准、历史合同案例多维信息，依托大模型深度语义解析能力自动识别合同法律隐患，智能生成标准化修改建议与风险说明。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section ref="caseTabs" class="case-tabs" :class="{ 'is-fixed': isTabsFixed }">
|
||||
<div class="case-container">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
type="button"
|
||||
class="tab-item"
|
||||
:class="{ 'tab-active': activeTab === tab.id }"
|
||||
@click="scrollToSection(tab.id)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="case-main">
|
||||
<section id="scenarios" class="case-section">
|
||||
<div class="case-container">
|
||||
<div class="section-heading">
|
||||
<h2>应用场景</h2>
|
||||
<p>覆盖企业合同全生命周期审核链路</p>
|
||||
</div>
|
||||
<div class="case-scenario-grid">
|
||||
<article class="case-feature-card scenario-card">
|
||||
<div class="case-feature-card__visual case-feature-card__visual--illustration visual-blue">
|
||||
<svg viewBox="0 0 400 200" fill="none">
|
||||
<circle cx="320" cy="40" r="60" fill="#3b82f6" opacity="0.1" />
|
||||
<circle cx="80" cy="160" r="40" fill="#6366f1" opacity="0.1" />
|
||||
<g transform="translate(120, 40)">
|
||||
<rect x="0" y="20" width="120" height="140" rx="8" fill="#e0e7ff" stroke="#3b82f6" stroke-width="2" />
|
||||
<line x1="20" y1="45" x2="100" y2="45" stroke="#3b82f6" stroke-width="2" opacity="0.3" />
|
||||
<line x1="20" y1="65" x2="100" y2="65" stroke="#3b82f6" stroke-width="2" opacity="0.3" />
|
||||
<line x1="20" y1="85" x2="80" y2="85" stroke="#3b82f6" stroke-width="2" opacity="0.3" />
|
||||
<rect x="15" y="10" width="120" height="140" rx="8" fill="#c7d2fe" stroke="#3b82f6" stroke-width="2" />
|
||||
<line x1="35" y1="35" x2="115" y2="35" stroke="#3b82f6" stroke-width="2" opacity="0.5" />
|
||||
<line x1="35" y1="55" x2="115" y2="55" stroke="#3b82f6" stroke-width="2" opacity="0.5" />
|
||||
<line x1="35" y1="75" x2="95" y2="75" stroke="#3b82f6" stroke-width="2" opacity="0.5" />
|
||||
<rect x="30" y="0" width="120" height="140" rx="8" fill="white" stroke="#3b82f6" stroke-width="2" />
|
||||
<line x1="50" y1="25" x2="130" y2="25" stroke="#3b82f6" stroke-width="2" />
|
||||
<line x1="50" y1="45" x2="130" y2="45" stroke="#3b82f6" stroke-width="2" />
|
||||
<line x1="50" y1="65" x2="110" y2="65" stroke="#3b82f6" stroke-width="2" />
|
||||
<circle cx="135" cy="25" r="8" fill="#10b981" />
|
||||
<path d="M 131 25 L 134 28 L 139 22" stroke="white" stroke-width="2" stroke-linecap="round" />
|
||||
<circle cx="135" cy="45" r="8" fill="#10b981" />
|
||||
<path d="M 131 45 L 134 48 L 139 42" stroke="white" stroke-width="2" stroke-linecap="round" />
|
||||
<circle cx="135" cy="65" r="8" fill="#f59e0b" />
|
||||
<line x1="131" y1="65" x2="139" y2="65" stroke="white" stroke-width="2" stroke-linecap="round" />
|
||||
</g>
|
||||
<g class="magnifier" transform="translate(60, 60)">
|
||||
<circle cx="25" cy="25" r="20" fill="none" stroke="#3b82f6" stroke-width="3" />
|
||||
<line x1="40" y1="40" x2="55" y2="55" stroke="#3b82f6" stroke-width="4" stroke-linecap="round" />
|
||||
<circle cx="25" cy="25" r="12" fill="#3b82f6" opacity="0.1" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="case-feature-card__head">
|
||||
<span class="case-icon-gradient">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414A1 1 0 0119 9.414V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</span>
|
||||
<h3>业务合同初审</h3>
|
||||
</div>
|
||||
<p>自动解析购销、服务、租赁、合作类通用业务合同，逐条对标企业风控红线快速筛查风险点，输出初审意见，减轻法务基础审核工作量，快速完成业务前置审批。</p>
|
||||
</article>
|
||||
|
||||
<article class="case-feature-card scenario-card">
|
||||
<div class="case-feature-card__visual case-feature-card__visual--illustration visual-purple">
|
||||
<svg viewBox="0 0 400 200" fill="none">
|
||||
<circle cx="100" cy="50" r="50" fill="#8b5cf6" opacity="0.1" />
|
||||
<circle cx="300" cy="150" r="60" fill="#ec4899" opacity="0.1" />
|
||||
<g transform="translate(140, 30)">
|
||||
<path d="M 60 0 L 120 20 L 120 80 Q 120 120 60 140 Q 0 120 0 80 L 0 20 Z" fill="#ddd6fe" stroke="#8b5cf6" stroke-width="2" opacity="0.6" />
|
||||
<path d="M 60 15 L 105 30 L 105 75 Q 105 105 60 120 Q 15 105 15 75 L 15 30 Z" fill="#c4b5fd" stroke="#8b5cf6" stroke-width="2" opacity="0.8" />
|
||||
<path d="M 60 30 L 90 40 L 90 70 Q 90 90 60 100 Q 30 90 30 70 L 30 40 Z" fill="white" stroke="#8b5cf6" stroke-width="2" />
|
||||
<rect x="48" y="55" width="24" height="20" rx="2" fill="#8b5cf6" />
|
||||
<path d="M 52 55 L 52 48 Q 52 42 60 42 Q 68 42 68 48 L 68 55" fill="none" stroke="#8b5cf6" stroke-width="3" />
|
||||
<circle cx="60" cy="65" r="3" fill="white" />
|
||||
</g>
|
||||
<g class="risk-dots">
|
||||
<circle cx="80" cy="100" r="6" fill="#ef4444" />
|
||||
<circle cx="80" cy="100" r="10" fill="#ef4444" opacity="0.3" />
|
||||
<circle cx="320" cy="80" r="6" fill="#f59e0b" />
|
||||
<circle cx="320" cy="80" r="10" fill="#f59e0b" opacity="0.3" />
|
||||
<circle cx="280" cy="140" r="6" fill="#10b981" />
|
||||
<circle cx="280" cy="140" r="10" fill="#10b981" opacity="0.3" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="case-feature-card__head">
|
||||
<span class="case-icon-gradient">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</span>
|
||||
<h3>复杂商事合同深度风控</h3>
|
||||
</div>
|
||||
<p>针对投融资、知识产权、工程、保密竞业等高风险专项合同，联动完整法条与司法判例开展多层级风险推演，梳理权责漏洞、违约缺陷、管辖争议等深层隐患，输出完整风控评估文档。</p>
|
||||
</article>
|
||||
|
||||
<article class="case-feature-card scenario-card">
|
||||
<div class="case-feature-card__visual case-feature-card__visual--illustration visual-green">
|
||||
<svg viewBox="0 0 400 200" fill="none">
|
||||
<circle cx="350" cy="60" r="50" fill="#10b981" opacity="0.1" />
|
||||
<circle cx="50" cy="140" r="40" fill="#14b8a6" opacity="0.1" />
|
||||
<g transform="translate(80, 40)">
|
||||
<rect x="0" y="0" width="100" height="130" rx="6" fill="white" stroke="#10b981" stroke-width="2" />
|
||||
<text x="10" y="20" font-size="10" fill="#10b981" font-weight="bold">V1.0</text>
|
||||
<line x1="15" y1="35" x2="85" y2="35" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
|
||||
<line x1="15" y1="50" x2="85" y2="50" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
|
||||
<line x1="15" y1="65" x2="75" y2="65" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
|
||||
<line x1="15" y1="80" x2="85" y2="80" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
|
||||
<line x1="15" y1="95" x2="65" y2="95" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
|
||||
<line x1="15" y1="50" x2="85" y2="50" stroke="#ef4444" stroke-width="2" />
|
||||
</g>
|
||||
<g transform="translate(220, 40)">
|
||||
<rect x="0" y="0" width="100" height="130" rx="6" fill="white" stroke="#14b8a6" stroke-width="2" />
|
||||
<text x="10" y="20" font-size="10" fill="#14b8a6" font-weight="bold">V2.0</text>
|
||||
<line x1="15" y1="35" x2="85" y2="35" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
|
||||
<line x1="15" y1="50" x2="85" y2="50" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
|
||||
<line x1="15" y1="65" x2="85" y2="65" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
|
||||
<line x1="15" y1="80" x2="75" y2="80" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
|
||||
<line x1="15" y1="95" x2="85" y2="95" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
|
||||
<rect x="13" y="63" width="74" height="4" fill="#10b981" opacity="0.3" />
|
||||
</g>
|
||||
<g class="compare-arrow" transform="translate(185, 90)">
|
||||
<path d="M 0 15 L 20 15 M 15 10 L 20 15 L 15 20" stroke="#6366f1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</g>
|
||||
<g class="diff-tags">
|
||||
<rect x="90" y="48" width="30" height="8" rx="2" fill="#ef4444" opacity="0.2" />
|
||||
<text x="95" y="54" font-size="8" fill="#ef4444" font-weight="bold">删除</text>
|
||||
<rect x="230" y="63" width="30" height="8" rx="2" fill="#10b981" opacity="0.2" />
|
||||
<text x="235" y="69" font-size="8" fill="#10b981" font-weight="bold">新增</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="case-feature-card__head">
|
||||
<span class="case-icon-gradient">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
||||
</svg>
|
||||
</span>
|
||||
<h3>多方合同版本比对修订</h3>
|
||||
</div>
|
||||
<p>自动识别甲乙双方多轮修改稿件差异，区分新增、删减、修改条款，高亮标注风险变更内容，同步生成版本对比台账，辅助商务谈判与法务复核，避免改稿遗漏关键风险。</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solution" class="case-section solution-section">
|
||||
<div class="case-container">
|
||||
<div class="section-heading">
|
||||
<h2>企业合同管理的困境与解决方案</h2>
|
||||
<p>围绕数据归集、合同编审、知识沉淀、智能咨询四大核心维度</p>
|
||||
</div>
|
||||
<div class="solution-grid">
|
||||
<div class="solution-column">
|
||||
<div class="column-title column-title--danger">
|
||||
<span>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M4.93 19h14.14c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.2 16c-.77 1.33.19 3 1.73 3z" />
|
||||
</svg>
|
||||
</span>
|
||||
<h3>现存困境</h3>
|
||||
</div>
|
||||
<article v-for="item in problems" :key="item.title" class="solution-item solution-item--danger">
|
||||
<span class="solution-icon">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
<h4>{{ item.title }}</h4>
|
||||
<p>{{ item.desc }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="solution-column">
|
||||
<div class="column-title column-title--primary">
|
||||
<span>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
<h3>解决方案</h3>
|
||||
</div>
|
||||
<article v-for="item in solutions" :key="item.title" class="solution-item solution-item--primary">
|
||||
<span class="solution-icon">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
<h4>{{ item.title }}</h4>
|
||||
<p>{{ item.desc }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="highlights" class="case-section">
|
||||
<div class="case-container">
|
||||
<div class="section-heading">
|
||||
<h2>项目亮点</h2>
|
||||
<p>全流程智能风控，四大核心审查能力落地</p>
|
||||
</div>
|
||||
<div class="case-highlight-grid">
|
||||
<article v-for="(item, index) in highlights" :key="item.title" class="case-highlight-card">
|
||||
<span class="highlight-num">{{ index + 1 }}</span>
|
||||
<div>
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.desc }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ContractCase',
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'scenarios',
|
||||
isTabsFixed: false,
|
||||
tabsOriginTop: 0,
|
||||
bannerImg: require('@/assets/image/bgimg.png'),
|
||||
tabs: [
|
||||
{ id: 'scenarios', label: '应用场景' },
|
||||
{ id: 'solution', label: '解决方案' },
|
||||
{ id: 'highlights', label: '项目亮点' }
|
||||
],
|
||||
scenarios: [
|
||||
{
|
||||
title: '业务合同初审',
|
||||
desc: '自动解析购销、服务、租赁、合作类通用业务合同，逐条对标企业风控红线快速筛查风险点，输出初审意见，减轻法务基础审核工作量。',
|
||||
icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414A1 1 0 0119 9.414V19a2 2 0 01-2 2z',
|
||||
visualClass: 'visual-blue'
|
||||
},
|
||||
{
|
||||
title: '复杂商事合同深度风控',
|
||||
desc: '针对投融资、知识产权、工程、保密竞业等高风险专项合同，联动完整法条与司法判例开展多层级风险推演，输出完整风控评估文档。',
|
||||
icon: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
|
||||
visualClass: 'visual-purple'
|
||||
},
|
||||
{
|
||||
title: '多方合同版本比对修订',
|
||||
desc: '自动识别甲乙双方多轮修改稿件差异，区分新增、删减、修改条款，高亮标注风险变更内容，辅助商务谈判与法务复核。',
|
||||
icon: 'M8 7h12m0 0l-4-4m4 4l-4 4M16 17H4m0 0l4 4m-4-4l4-4',
|
||||
visualClass: 'visual-green'
|
||||
}
|
||||
],
|
||||
problems: [
|
||||
{
|
||||
title: '文件信息割裂分散',
|
||||
desc: '合同、法规、历史判例、内部模板散落在不同存储渠道，无统一检索入口，审核时需跨文件反复核对。',
|
||||
icon: 'M4 7v10c0 2.21 3.58 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.58 4 8 4s8-1.79 8-4M4 7c0-2.21 3.58-4 8-4s8 1.79 8 4'
|
||||
},
|
||||
{
|
||||
title: '风控经验难以留存复用',
|
||||
desc: '资深法务的审查要点、谈判底线、风险处置经验仅存于个人，人员交接后容易出现标准不统一。',
|
||||
icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'
|
||||
},
|
||||
{
|
||||
title: '人工审核耗时长、标准化弱',
|
||||
desc: '海量合同逐条人工审阅消耗大量人力，不同法务审核尺度参差不齐，紧急签约场景响应慢。',
|
||||
icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'
|
||||
}
|
||||
],
|
||||
solutions: [
|
||||
{
|
||||
title: '多源文件统一归集解析',
|
||||
desc: '批量上传 PDF、Word、扫描件合同，OCR 识别图文内容，统一结构化抽取交易主体、价款、履约、违约等关键信息。',
|
||||
icon: 'M4 7v10c0 2.21 3.58 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.58 4 8 4s8-1.79 8-4'
|
||||
},
|
||||
{
|
||||
title: '全条款 AI 智能编审修正',
|
||||
desc: '分层扫描合同全部条款，对标法律法规与企业内控规则标记高中低三级风险，配套标准化合规替换条款。',
|
||||
icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414A1 1 0 0119 9.414V19a2 2 0 01-2 2z'
|
||||
},
|
||||
{
|
||||
title: '法务知识库沉淀管理',
|
||||
desc: '将企业标准模板、审查清单、判例、内部风控制度转化为结构化知识库，沉淀企业专属法务资产。',
|
||||
icon: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253'
|
||||
},
|
||||
{
|
||||
title: '自然语言法务智能问答',
|
||||
desc: '支持业务、法务人员以口语化提问查询合规要求、条款写法、风险后果，即时输出专业解答与参考条款。',
|
||||
icon: 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z'
|
||||
}
|
||||
],
|
||||
highlights: [
|
||||
{
|
||||
title: '分级风险自动标注，配套合规整改条款',
|
||||
desc: '按重大、一般、提示三级划分风险，精准定位风险对应原文段落，每条风险同步匹配适配企业制度与现行法律的替换条款。'
|
||||
},
|
||||
{
|
||||
title: '多版本合同差异智能比对溯源',
|
||||
desc: '上传新旧合同、甲乙双方往来稿件，系统自动高亮新增、删减、变更条款，生成可追溯对比台账。'
|
||||
},
|
||||
{
|
||||
title: '全格式合同兼容识别，扫描件精准解析',
|
||||
desc: '支持 Word、PDF、图片扫描件、盖章影像文件上传，内置高精度 OCR 图文识别，覆盖存量和增量合同文件。'
|
||||
},
|
||||
{
|
||||
title: '企业法务知识一键复用，审查标准统一',
|
||||
desc: '内置企业专属合同模板库、风控红线清单、行业判例库，新员工可直接复用成熟审查标准。'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const scroller = this.getScrollContainer()
|
||||
this.resetScrollTop(scroller)
|
||||
this.refreshTabsOrigin()
|
||||
scroller.addEventListener('scroll', this.handlePageScroll, { passive: true })
|
||||
this.handlePageScroll()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.getScrollContainer().removeEventListener('scroll', this.handlePageScroll)
|
||||
},
|
||||
methods: {
|
||||
getScrollContainer() {
|
||||
return document.getElementById('homeOut') || window
|
||||
},
|
||||
resetScrollTop(scroller) {
|
||||
if (scroller === window) {
|
||||
window.scrollTo(0, 0)
|
||||
} else {
|
||||
scroller.scrollTop = 0
|
||||
}
|
||||
this.isTabsFixed = false
|
||||
},
|
||||
refreshTabsOrigin() {
|
||||
const scroller = this.getScrollContainer()
|
||||
this.tabsOriginTop = this.getElementTopInScroller(this.$refs.caseTabs, scroller)
|
||||
},
|
||||
getScrollOffset() {
|
||||
const tabs = this.$el.querySelector('.case-tabs')
|
||||
return (tabs ? tabs.offsetHeight : 0) + 12
|
||||
},
|
||||
getElementTopInScroller(element, scroller) {
|
||||
if (scroller === window) {
|
||||
return element.getBoundingClientRect().top + window.pageYOffset
|
||||
}
|
||||
return element.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop
|
||||
},
|
||||
getScrollerTop(scroller) {
|
||||
return scroller === window ? window.pageYOffset : scroller.scrollTop
|
||||
},
|
||||
scrollToSection(sectionName) {
|
||||
this.activeTab = sectionName
|
||||
const element = this.$el.querySelector(`#${sectionName}`)
|
||||
if (!element) return
|
||||
const scroller = this.getScrollContainer()
|
||||
const top = this.getElementTopInScroller(element, scroller) - this.getScrollOffset()
|
||||
scroller.scrollTo({ top, behavior: 'smooth' })
|
||||
},
|
||||
handlePageScroll() {
|
||||
const scroller = this.getScrollContainer()
|
||||
const scrollerTop = this.getScrollerTop(scroller)
|
||||
this.isTabsFixed = scrollerTop >= this.tabsOriginTop
|
||||
const offsetTop = scrollerTop + this.getScrollOffset() + 24
|
||||
const currentTab = this.tabs
|
||||
.map(tab => {
|
||||
const element = this.$el.querySelector(`#${tab.id}`)
|
||||
return element ? { id: tab.id, top: this.getElementTopInScroller(element, scroller) } : null
|
||||
})
|
||||
.filter(Boolean)
|
||||
.reverse()
|
||||
.find(tab => offsetTop >= tab.top)
|
||||
if (currentTab) this.activeTab = currentTab.id
|
||||
},
|
||||
handleContact() {
|
||||
this.$message.info('感谢您的关注，我们将尽快与您联系')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.contract-case-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: visible;
|
||||
color: #111827;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
}
|
||||
|
||||
.contract-case-page *,
|
||||
.contract-case-page *::before,
|
||||
.contract-case-page *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.contract-case-page h1,
|
||||
.contract-case-page h2,
|
||||
.contract-case-page h3,
|
||||
.contract-case-page h4,
|
||||
.contract-case-page p {
|
||||
margin-top: 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.case-container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.decor {
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
filter: blur(64px);
|
||||
opacity: 0.12;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.decor--blue {
|
||||
top: 80px;
|
||||
left: 40px;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
background: linear-gradient(135deg, #60a5fa, #a855f7);
|
||||
}
|
||||
|
||||
.decor--purple {
|
||||
top: 400px;
|
||||
right: 80px;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
background: linear-gradient(135deg, #c084fc, #3b82f6);
|
||||
}
|
||||
|
||||
.case-hero {
|
||||
position: relative;
|
||||
min-height: min(446px, calc(100vw * 446 / 1551));
|
||||
padding: 120px 0 86px;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.case-hero__content {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.case-hero h1 {
|
||||
margin: 0 0 24px;
|
||||
color: #111827;
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.case-hero p {
|
||||
max-width: 980px;
|
||||
margin: 0;
|
||||
color: #4b5563;
|
||||
font-size: 20px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.case-tabs {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 80;
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.case-tabs.is-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contract-case-page.has-fixed-tabs .case-main {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.case-tabs .case-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
height: 100%;
|
||||
padding: 12px 16px;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-item:hover,
|
||||
.tab-active {
|
||||
color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.case-main {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.case-section {
|
||||
position: relative;
|
||||
padding: 72px 0;
|
||||
}
|
||||
|
||||
.solution-section {
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
margin-bottom: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
margin: 0 0 16px;
|
||||
color: #111827;
|
||||
font-size: 40px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.section-heading p {
|
||||
margin: 0;
|
||||
color: #4b5563;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.case-scenario-grid,
|
||||
.solution-grid,
|
||||
.case-highlight-grid {
|
||||
display: grid;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.contract-case-page .case-scenario-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
||||
gap: 32px !important;
|
||||
}
|
||||
|
||||
.solution-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.contract-case-page .case-highlight-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
gap: 32px !important;
|
||||
}
|
||||
|
||||
.contract-case-page .case-feature-card,
|
||||
.solution-item,
|
||||
.contract-case-page .case-highlight-card {
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contract-case-page .case-feature-card:hover,
|
||||
.solution-item:hover,
|
||||
.contract-case-page .case-highlight-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.contract-case-page .case-feature-card {
|
||||
display: block !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.case-feature-card__visual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
.case-feature-card__visual svg {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
}
|
||||
|
||||
.case-feature-card__visual--illustration {
|
||||
position: relative;
|
||||
height: 192px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.case-feature-card__visual--illustration > svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.magnifier,
|
||||
.compare-arrow {
|
||||
transition: transform 0.3s ease;
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.scenario-card:hover .magnifier {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.scenario-card:hover .compare-arrow {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
.scenario-card:hover .risk-dots {
|
||||
animation: case-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.scenario-card:hover .diff-tags {
|
||||
animation: case-bounce 1s infinite;
|
||||
}
|
||||
|
||||
.visual-blue {
|
||||
color: #2563eb;
|
||||
background: linear-gradient(135deg, #eff6ff, #e0e7ff);
|
||||
}
|
||||
|
||||
.visual-purple {
|
||||
color: #7c3aed;
|
||||
background: linear-gradient(135deg, #faf5ff, #fce7f3);
|
||||
}
|
||||
|
||||
.visual-green {
|
||||
color: #0d9488;
|
||||
background: linear-gradient(135deg, #f0fdf4, #ccfbf1);
|
||||
}
|
||||
|
||||
@keyframes case-pulse {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes case-bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(0);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.case-feature-card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 32px 32px 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.case-feature-card h3,
|
||||
.solution-item h4,
|
||||
.case-highlight-card h3 {
|
||||
margin: 0;
|
||||
color: #111827;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.case-feature-card p,
|
||||
.solution-item p,
|
||||
.case-highlight-card p {
|
||||
margin: 0;
|
||||
color: #4b5563;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.case-feature-card > p {
|
||||
padding: 0 32px 32px;
|
||||
}
|
||||
|
||||
.case-icon-gradient,
|
||||
.solution-icon,
|
||||
.column-title span,
|
||||
.highlight-num {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.case-icon-gradient {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.case-icon-gradient svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.column-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.column-title span {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
|
||||
}
|
||||
|
||||
.column-title--danger span {
|
||||
background: linear-gradient(135deg, #ef4444, #f97316);
|
||||
}
|
||||
|
||||
.column-title h3 {
|
||||
margin: 0;
|
||||
color: #111827;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.column-title svg,
|
||||
.solution-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.solution-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.solution-item {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
border-left: 4px solid #60a5fa;
|
||||
}
|
||||
|
||||
.solution-item--danger {
|
||||
border-left-color: #f87171;
|
||||
}
|
||||
|
||||
.solution-item--danger .solution-icon {
|
||||
background: linear-gradient(135deg, #fee2e2, #ffedd5);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.solution-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.solution-item h4 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.contract-case-page .case-highlight-card {
|
||||
display: flex !important;
|
||||
gap: 18px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.highlight-num {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.case-highlight-card h3 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.case-cta {
|
||||
padding: 80px 0;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #334155, #1e293b);
|
||||
}
|
||||
|
||||
.case-cta__inner {
|
||||
max-width: 896px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.case-cta h2 {
|
||||
margin: 0 0 24px;
|
||||
font-size: 40px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.case-cta p {
|
||||
margin: 0 0 32px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.case-cta button {
|
||||
padding: 16px 32px;
|
||||
color: #2563eb;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.case-cta button:hover {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.case-scenario-grid,
|
||||
.solution-grid,
|
||||
.case-highlight-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.case-hero {
|
||||
padding: 72px 0 56px;
|
||||
}
|
||||
|
||||
.case-hero h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.case-hero p,
|
||||
.section-heading p,
|
||||
.case-cta p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.case-tabs {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.case-tabs .case-container {
|
||||
gap: 12px;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.case-cta h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.case-feature-card__head,
|
||||
.case-feature-card > p,
|
||||
.solution-item,
|
||||
.case-highlight-card {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -110,17 +110,24 @@ export default {
|
||||
],
|
||||
industrySubTabs: [
|
||||
{ id: 'all', label: '全部' },
|
||||
{ id: 'forestry', label: '林业' },
|
||||
{ id: 'energy', label: '能源' },
|
||||
{ id: 'quality', label: '质检' }
|
||||
{ id: 'industry', label: '工业' },
|
||||
{ id: 'crossBorder', label: '跨境贸易' },
|
||||
{ id: 'internet', label: '互联网' }
|
||||
],
|
||||
apps: [
|
||||
{ id: 1, name: 'E招标', description: '全流程电子化招标交易核心工具，支持多品类招标业务线上开展，实现招投标全过程无纸化运行。搭载多CA互认、在线清标、电子保函等实用功能，保障招标合规高效。', tags: ['多CA互认', '在线清标', '电子保函'], category: 'general', subCategory: 'bidding', iconPath: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', decorClass: 'decor-gradient-blue', iconClass: 'icon-gradient-blue' },
|
||||
{ id: 2, name: 'E投标', description: '适配全品类电子招投标场景的线上投标工具，支持在线完成信息注册、标书获取、文件编制、加密提交全流程操作。实时同步招标变更与澄清信息，保障投标过程安全可追溯。', tags: ['在线签章', '加密提交', '变更同步'], category: 'general', subCategory: 'bidding', iconPath: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12', decorClass: 'decor-gradient-green', iconClass: 'icon-gradient-green' },
|
||||
{ id: 2, name: 'E投标', description: '适配全品类电子招投标场景的线上投标工具，支持在线完成信息注册、标书获取、文件编制、加密提交全流程操作。实时同步招标变更与澄清信息，保障投标过程安全可追溯。', tags: ['在线签章', '加密提交', '变更同步'], category: 'general', subCategory: 'bidding', iconPath: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12', decorClass: 'decor-gradient-green', iconClass: 'icon-gradient-green', externalUrl: 'https://bid-ocai-v2.jinan.opencomputing.cn/' },
|
||||
{ id: 3, name: 'E评标', description: '智能化线上评审系统，覆盖专家签到、清标比对、符合性评审、打分汇总、报告生成全流程。支持标书交叉比对、废标在线操作与澄清收发，提升评标效率与规范性。', tags: ['专家云签', '交叉比对', '智能打分'], category: 'general', subCategory: 'bidding', iconPath: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4', decorClass: 'decor-gradient-indigo', iconClass: 'icon-gradient-indigo' },
|
||||
{ id: 4, name: '合同智能审查', description: 'AI驱动的办公智能体，可快速识别合同中的风险条款、表述歧义、合规漏洞，自动标注问题位置并给出修改建议。支持多类型合同模板适配，大幅缩短人工审查时长。', tags: ['风险识别', '批量审查', '审查报告'], category: 'general', subCategory: 'office', iconPath: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', decorClass: 'decor-gradient-amber', iconClass: 'icon-gradient-amber' },
|
||||
{ id: 4, name: '合同智能审查', description: 'AI驱动的办公智能体，可快速识别合同中的风险条款、表述歧义、合规漏洞，自动标注问题位置并给出修改建议。支持多类型合同模板适配，大幅缩短人工审查时长。', tags: ['风险识别', '批量审查', '审查报告'], category: 'general', subCategory: 'office', iconPath: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', decorClass: 'decor-gradient-amber', iconClass: 'icon-gradient-amber', casePath: '/homePage/agentStore/contractCase' },
|
||||
{ id: 5, name: '投策智能体', description: '面向企业投资决策的辅助智能体，整合多维度市场数据、行业趋势与政策信息，通过算法模拟不同决策场景的收益与风险，自动生成可视化分析报告，提升投资方案科学性。', tags: ['场景模拟', '可视化报告', '风险预判'], category: 'general', subCategory: 'office', iconPath: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6', decorClass: 'decor-gradient-purple', iconClass: 'icon-gradient-purple', casePath: '/homePage/agentStore/decisionCase' },
|
||||
{ id: 6, name: '能源监控智能体', description: '面向工业能源管理场景，实时采集能耗数据，AI分析异常用能并给出优化建议，助力企业节能降耗。', tags: ['能耗分析', '异常预警', '优化建议'], category: 'industry', subCategory: 'energy', iconPath: 'M13 10V3L4 14h7v7l9-11h-7z', decorClass: 'decor-gradient-blue', iconClass: 'icon-gradient-blue' },
|
||||
{ id: 7, name: '质检视觉检测', description: '基于深度学习的工业视觉质检方案，可快速识别产品表面缺陷、尺寸偏差，实时输出检测报告，提升产线良率。', tags: ['缺陷检测', '实时报告', '深度学习'], category: 'industry', subCategory: 'quality', iconPath: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z', decorClass: 'decor-gradient-green', iconClass: 'icon-gradient-green' }
|
||||
{ id: 6, name: '采伐智审', description: '面向林业管理的行业智能体，可在线完成采伐申请材料的智能核验，自动比对采伐范围、树种、蓄积量等核心指标与合规要求，快速识别违规申请，助力林业资源可持续利用。', tags: ['智能核验', '合规比对', '违规识别'], category: 'industry', subCategory: 'forestry', iconPath: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L22 12l-6.714 3.143L13 22l-2.286-6.857L4 12l6.714-3.143L13 2z', decorClass: 'decor-gradient-emerald', iconClass: 'icon-gradient-emerald' },
|
||||
{ id: 7, name: '燃机智慧监盘', description: '能源领域工业智能体，实时采集燃机运行的温度、压力、振动等多维度数据，通过AI算法识别异常运行征兆，提前预判潜在故障，保障燃机稳定运行，降低运维成本。', tags: ['实时监测', '故障预判', '智能告警'], category: 'industry', subCategory: 'energy', iconPath: 'M13 10V3L4 14h7v7l9-11h-7z', decorClass: 'decor-gradient-red', iconClass: 'icon-gradient-red' },
|
||||
{ id: 8, name: '电价预测', description: '面向能源行业的预测智能体，结合历史电价数据、供需变化、政策调整、天气影响等多维度变量，通过机器学习模型实现不同周期的电价精准预测，帮助电力企业优化收益管理。', tags: ['电价预测', '策略优化', '风险规避'], category: 'industry', subCategory: 'energy', iconPath: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6', decorClass: 'decor-gradient-cyan', iconClass: 'icon-gradient-cyan' },
|
||||
{ id: 9, name: 'AI质检', description: '工业领域质量检测智能体，依托计算机视觉与深度学习技术，可高清识别产品表面划痕、尺寸偏差、形态缺陷等多种问题，实现高速生产线实时检测，帮助企业提升良品率。', tags: ['视觉检测', '缺陷识别', '实时检测'], category: 'industry', subCategory: 'industry', iconPath: 'M15 12a3 3 0 11-6 0 3 3 0 016 0zm7 0s-3.5 7-10 7-10-7-10-7 3.5-7 10-7 10 7 10 7z', decorClass: 'decor-gradient-orange', iconClass: 'icon-gradient-orange' },
|
||||
{ id: 10, name: '智能报关', description: '跨境贸易领域智能服务体，可自动识别报关单据信息，比对海关监管要求，智能校验申报数据准确性，自动生成规范报关单，提升申报通过率，降低合规风险。', tags: ['单据识别', '智能校验', '风险预判'], category: 'industry', subCategory: 'crossBorder', iconPath: 'M3 6l9-4 9 4-9 4-9-4zm0 6l9 4 9-4m-18 0l9-4 9 4m-9 4v6', decorClass: 'decor-gradient-teal', iconClass: 'icon-gradient-teal' },
|
||||
{ id: 11, name: 'AI漫画制作', description: '互联网内容创作智能体，覆盖从剧本生成、分镜拆解、素材生成到视频合成的全流程制作。支持工业化批量生产，帮助中小团队低成本快速产出AI漫画作品，大幅降低创作门槛。', tags: ['剧本生成', '批量生产', '视频合成'], category: 'industry', subCategory: 'internet', iconPath: 'M4 5a2 2 0 012-2h12a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm4 0v14m8-14v14M4 9h16M4 15h16', decorClass: 'decor-gradient-pink', iconClass: 'icon-gradient-pink' }
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -143,6 +150,10 @@ export default {
|
||||
this.activeSubTab = 'all'
|
||||
},
|
||||
handleUse(app) {
|
||||
if (app.externalUrl) {
|
||||
window.open(app.externalUrl, '_blank')
|
||||
return
|
||||
}
|
||||
if (app.casePath) {
|
||||
this.$router.push(app.casePath)
|
||||
return
|
||||
@ -157,5 +168,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.agent-store-page {
|
||||
padding-top: 82px;
|
||||
}
|
||||
|
||||
@import './agent.css';
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="news-page">
|
||||
|
||||
new
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>sale</div>
|
||||
<div class="sale-page">sale</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
|
||||
@ -424,7 +424,7 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.compute-market-page {
|
||||
min-height: 100vh;
|
||||
padding: 28px 0 8px;
|
||||
padding: 82px 0 8px;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(64, 158, 255, 0.18), transparent 34%),
|
||||
radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 28%),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<div class="detail-page" style="width: 100%;">
|
||||
<!-- 顶部容器，设置最小宽度和flex布局 -->
|
||||
<div id="topContainer"
|
||||
style="min-width: 1400px; width: 100%;display: flex;flex-direction: column;justify-content: flex-start;align-items: center">
|
||||
|
||||
@ -1,48 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="产品咨询"
|
||||
:visible.sync="showTalk"
|
||||
width="1000px"
|
||||
title="联系销售"
|
||||
:visible="dialogVisible"
|
||||
width="620px"
|
||||
center
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
@close="cancelBtn"
|
||||
top="15px"
|
||||
@update:visible="handleDialogVisibleUpdate"
|
||||
top="8vh"
|
||||
custom-class="talk-dialog"
|
||||
>
|
||||
<el-form ref="ruleForm" :rules="rules" label-position="top" label-width="80px" :model="addData">
|
||||
<el-form-item label="需求描述">
|
||||
<el-input :autosize="{ minRows: 3, maxRows: 3}" type="textarea" size="mini"
|
||||
v-model="addData.content"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户类型">
|
||||
<el-radio v-model="addData.custom_type" label="1">企业</el-radio>
|
||||
<el-radio v-model="addData.custom_type" label="0">个人</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 10px" label="联系人姓名" prop="name">
|
||||
<el-input style="width: 350px;" size="mini" v-model="addData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 10px" prop="phone" label="联系人手机">
|
||||
<el-input style="width: 350px;" size="mini" v-model="addData.phone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="addData.custom_type==='1'" style="margin-bottom: 10px" label="公司名称">
|
||||
<el-input style="width: 350px;" size="mini" v-model="addData.company"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 10px" label="联系人邮箱">
|
||||
<el-input style="width: 350px;" size="mini" v-model="addData.email"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-checkbox style="margin-top: 25px" v-model="checked">
|
||||
勾选表示：您同意<span v-if="JSON.stringify(logoInfoNew)!=='{}'">{{ logoInfoNew.home.bannerTitle }}</span>及其授权的合作伙伴通过您填写的联系方式联系您，且数据仅用于与您沟通。当您注销平台账号后，您的数据会被销毁。
|
||||
</el-checkbox>
|
||||
<div class="qcode">
|
||||
|
||||
<img v-if="JSON.stringify(logoInfoNew)!=='{}'" :src="logoInfoNew.home.qrCode" alt="">
|
||||
<span style="margin-top: 10px;display: inline-block">扫码添加官方客服</span>
|
||||
<div class="talk-body">
|
||||
<div class="talk-form">
|
||||
<el-form ref="ruleForm" :rules="rules" label-position="top" label-width="80px" :model="addData">
|
||||
<el-form-item label="需求描述">
|
||||
<el-input :autosize="{ minRows: 4, maxRows: 4 }" type="textarea" v-model="addData.content" placeholder="请输入您的具体需求"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户类型">
|
||||
<el-radio v-model="addData.custom_type" label="1">企业</el-radio>
|
||||
<el-radio v-model="addData.custom_type" label="0">个人</el-radio>
|
||||
</el-form-item>
|
||||
<div class="form-grid">
|
||||
<el-form-item label="联系人姓名" prop="name">
|
||||
<el-input v-model="addData.name" placeholder="请输入联系人姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="phone" label="联系人手机">
|
||||
<el-input v-model="addData.phone" placeholder="请输入联系人手机"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="addData.custom_type==='1'" label="公司名称">
|
||||
<el-input v-model="addData.company" placeholder="请输入公司名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人邮箱">
|
||||
<el-input v-model="addData.email" placeholder="请输入联系人邮箱"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-checkbox class="agreement-checkbox" v-model="checked">
|
||||
勾选表示：您同意<span v-if="JSON.stringify(logoInfoNew)!=='{}'">{{ logoInfoNew.home.bannerTitle }}</span>及其授权的合作伙伴通过您填写的联系方式联系您，且数据仅用于与您沟通。当您注销平台账号后，您的数据会被销毁。
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<div class="qcode">
|
||||
<img v-if="JSON.stringify(logoInfoNew)!=='{}'" :src="logoInfoNew.home.qrCode" alt="">
|
||||
<span>扫码添加官方客服</span>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
|
||||
<!-- <el-button size="mini" @click="cancelBtn">取 消</el-button>-->
|
||||
<el-button size="mini" type="primary" @click="confirmBtn">提 交</el-button>
|
||||
</span>
|
||||
<el-button class="cancel-btn" @click="cancelBtn">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" :loading="addBtnLoading" @click="confirmBtn">提交咨询</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -71,6 +78,7 @@ export default Vue.extend({
|
||||
},
|
||||
addBtnLoading: false,
|
||||
checked: false,
|
||||
dialogVisible: false,
|
||||
addData: {
|
||||
content: '',//需求内容
|
||||
custom_type: "1",//客户类型 0-个人 1-企业
|
||||
@ -87,8 +95,23 @@ export default Vue.extend({
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showTalk: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
this.dialogVisible = value
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDialogVisibleUpdate(value) {
|
||||
this.dialogVisible = value;
|
||||
if (!value) {
|
||||
this.$store.commit('setShowTalk', false);
|
||||
}
|
||||
},
|
||||
cancelBtn() {
|
||||
this.dialogVisible = false;
|
||||
this.$store.commit('setShowTalk', false);
|
||||
console.log("取消按钮被点击了");
|
||||
},
|
||||
@ -144,41 +167,176 @@ export default Vue.extend({
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .talk-dialog {
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
|
||||
z-index: 99999999999999999!important;
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 22px 28px 8px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__title {
|
||||
color: #111827;
|
||||
font-size: 22px;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__headerbtn {
|
||||
top: 26px;
|
||||
right: 28px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 8px 28px 6px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
padding-bottom: 0;
|
||||
padding-bottom: 8px;
|
||||
color: #374151;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner,
|
||||
::v-deep .el-textarea__inner {
|
||||
border-radius: 12px;
|
||||
border-color: #e5eaf3;
|
||||
color: #111827;
|
||||
font-size: 15px;
|
||||
pointer-events: auto;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner {
|
||||
padding: 12px 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
color: #374151;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.talk-body {
|
||||
position: relative;
|
||||
min-height: 470px;
|
||||
}
|
||||
|
||||
.talk-form {
|
||||
min-width: 0;
|
||||
padding-right: 178px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.agreement-checkbox {
|
||||
margin-top: 4px;
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.qcode {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
min-height: 174px;
|
||||
padding: 14px 12px;
|
||||
position: absolute;
|
||||
right: 150px;
|
||||
bottom: 150px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
|
||||
border: 1px solid #edf1f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 12px;
|
||||
color: #4b5563;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__footer {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 0;
|
||||
padding-bottom: 35px;
|
||||
gap: 14px;
|
||||
padding: 8px 28px 26px;
|
||||
}
|
||||
|
||||
.cancel-btn,
|
||||
.submit-btn {
|
||||
min-width: 160px;
|
||||
height: 44px;
|
||||
padding: 0 32px;
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
border: 1px solid #d8e0ef;
|
||||
color: #4b5563;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
border: 0;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
box-shadow: 0 12px 28px rgba(39, 90, 255, 0.22);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.talk-body {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.talk-form {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.qcode {
|
||||
position: static;
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,13 +2,15 @@
|
||||
<div id="homeOut" class="homeOut">
|
||||
<TopBox id="topBox"></TopBox>
|
||||
|
||||
<router-view></router-view>
|
||||
<div class="home-router-view">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<!-- footer-->
|
||||
<div class="footer">
|
||||
<div class="left-box" style="border-bottom: 1px solid #7A82A0">
|
||||
<div class="left-box">
|
||||
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<img v-if="JSON.stringify(logoInfoNew)!=='{}'" style="width: 148px;height: 48px;"
|
||||
<div class="footer-brand">
|
||||
<img v-if="JSON.stringify(logoInfoNew)!=='{}'"
|
||||
:src="logoInfoNew.home.logoImg" alt=""
|
||||
class="img">
|
||||
<div class="content-main">
|
||||
@ -27,40 +29,19 @@
|
||||
</div>
|
||||
</div>
|
||||
<ul class="bigUl">
|
||||
|
||||
<!-- <li class="bigLi">-->
|
||||
<!-- <span class="title">关于我们</span>-->
|
||||
<!-- <ul class="smallUl">-->
|
||||
<!-- <li class="smallLi" @click="$router.push('/homePage/about')">公司介绍</li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- <span class="title"> </span>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li class="bigLi">-->
|
||||
<!-- <span class="title">产品</span>-->
|
||||
<!-- <ul class="smallUl">-->
|
||||
<!-- <li @click="goBaidu" class="smallLi">百度云</li>-->
|
||||
<!-- <li @click="goAliyun" class="smallLi">阿里云</li>-->
|
||||
<!-- <!– <li class="smallLi">开元云</li>–>-->
|
||||
<!-- </ul>-->
|
||||
<!-- <span class="title"> </span>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li class="bigLi">-->
|
||||
<!-- <span class="title">解决方案</span>-->
|
||||
<!-- <ul class="smallUl">-->
|
||||
<!-- <li class="smallLi">生物医药</li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- <span class="title"> </span>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li class="bigLi">-->
|
||||
<!-- <span class="title">服务与支持</span>-->
|
||||
<!-- <ul class="smallUl">-->
|
||||
<!-- <li class="smallLi">模型微调</li>-->
|
||||
<!-- <li class="smallLi">模型应用</li>-->
|
||||
<!-- <li class="smallLi">业务咨询</li>-->
|
||||
<!-- <li class="smallLi">加入开元</li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- <span class="title"> </span>-->
|
||||
<!-- </li>-->
|
||||
<li class="bigLi footer-service">
|
||||
<span class="title">产品服务</span>
|
||||
<ul class="smallUl footer-service-list">
|
||||
<li
|
||||
v-for="item in footerProductServices"
|
||||
:key="item.label"
|
||||
class="smallLi"
|
||||
@click="goFooterService(item.path)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="JSON.stringify(logoInfoNew)!=='{}'&&logoInfoNew.home.bannerTitle!=='开元数智'" class="right-box">
|
||||
<div class="qr-box">
|
||||
@ -70,7 +51,7 @@
|
||||
</div>
|
||||
<span class="qr-content">微信客服</span>
|
||||
</div>
|
||||
<div class="qr-box" style="margin-left: 0.667rem">
|
||||
<div class="qr-box">
|
||||
<div class="qr-code">
|
||||
<img src="./img/kefu.jpg" style="padding: 0.08rem" alt="">
|
||||
|
||||
@ -79,9 +60,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;align-items: center;width: 100%; ">
|
||||
<div class="footer-record">
|
||||
<span v-if="JSON.stringify(logoInfoNew)!=='{}'"
|
||||
style="margin:15px 0 ;width: 1400px;display:flex;justify-content:center;align-items:center;color: #7A82A0;"><span
|
||||
class="footer-record__text"><span
|
||||
class="goStyle"
|
||||
@click="goOut('https://beian.miit.gov.cn/#/Integrated/index')">
|
||||
京ICP备{{
|
||||
@ -150,6 +131,15 @@ export default Vue.extend({
|
||||
icon: require("./newImg/container.png"),
|
||||
activeIcon: require("./newImg/containerActive.png")
|
||||
}
|
||||
],
|
||||
footerProductServices: [
|
||||
{ label: 'Token市集', path: '/homePage/tokenMarket' },
|
||||
{ label: '算力市场', path: '/homePage/computeMarket' },
|
||||
{ label: 'OPC公共服务平台', path: '/homePage/opc' },
|
||||
{ label: '训推平台', path: '/homePage/trainPlatform' },
|
||||
{ label: '智能体商店', path: '/homePage/agentStore' },
|
||||
{ label: '供需广场', path: '/ncmatchHome/supplyAndDemandSquare' },
|
||||
{ label: '文档中心', path: '/homePage/new' },
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -179,6 +169,10 @@ export default Vue.extend({
|
||||
goOut(url){
|
||||
window.open(url)
|
||||
},
|
||||
goFooterService(path) {
|
||||
if (!path || this.$route.path === path) return
|
||||
this.$router.push(path)
|
||||
},
|
||||
scrollToElement(id) {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
@ -247,54 +241,94 @@ export default Vue.extend({
|
||||
height: 100%;
|
||||
overflow: auto !important;
|
||||
min-width: 1500px;
|
||||
// background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 60%, #f5f8ff 100%);
|
||||
}
|
||||
#topBox{
|
||||
// height: 82px;
|
||||
background: transparent!important;
|
||||
background-color: transparent!important;
|
||||
box-shadow: none!important;
|
||||
border: 0!important;
|
||||
}
|
||||
|
||||
.home-router-view {
|
||||
width: 100%;
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 35px 0;
|
||||
padding: 42px 0 22px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.left-box {
|
||||
width: 1400px;
|
||||
height: 100%;
|
||||
min-height: 180px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 15px;
|
||||
align-items: flex-start;
|
||||
padding: 0 0 30px;
|
||||
border-bottom: 1px solid rgba(122, 130, 160, 0.28);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
width: 420px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.img {
|
||||
width: 168px;
|
||||
height: 54px;
|
||||
object-fit: contain;
|
||||
object-position: left center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
height: 100%;
|
||||
min-width: 260px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 34px;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
mix-blend-mode: normal;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
font-size: 0.187rem;
|
||||
color: #7A82A0;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
padding: 6px;
|
||||
border: 1px solid #edf1f7;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
width: 1.853rem;
|
||||
height: 1.853rem;
|
||||
}
|
||||
|
||||
.qr-content {
|
||||
mix-blend-mode: normal;
|
||||
color: rgba(24, 24, 24, 1);
|
||||
color: #4b5563;
|
||||
font-family: PingFang SC, serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.187rem;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.qr-box {
|
||||
@ -314,27 +348,30 @@ export default Vue.extend({
|
||||
}
|
||||
|
||||
.bigUl {
|
||||
margin: 0 15px;
|
||||
margin-left: -250px;
|
||||
//padding-top: 15px;
|
||||
width: fit-content;
|
||||
margin: 0 80px 0 40px;
|
||||
width: 260px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
.bigLi {
|
||||
margin: 0 25px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
height: 100%;
|
||||
|
||||
.title {
|
||||
color: #222F60;
|
||||
color: #111827;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.smallUl {
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 15px;
|
||||
color: #7A82A0;
|
||||
|
||||
li {
|
||||
@ -343,12 +380,29 @@ export default Vue.extend({
|
||||
}
|
||||
}
|
||||
|
||||
.footer-service {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-service-list {
|
||||
margin-top: 16px;
|
||||
|
||||
.smallLi {
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 14px;
|
||||
color: #7A82A0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
margin: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -358,12 +412,32 @@ export default Vue.extend({
|
||||
}
|
||||
|
||||
.smallLi {
|
||||
transition: color .2s ease, transform .2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #1b5bff;
|
||||
cursor: pointer;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.footer-record {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-record__text {
|
||||
width: 1400px;
|
||||
margin: 18px 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #7A82A0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.goStyle {
|
||||
cursor: pointer;
|
||||
transition: all .3s ease-in-out;
|
||||
|
||||
1122
f/web-kboss/src/views/homePage/mainPage/OPC/index.vue
Normal file
1122
f/web-kboss/src/views/homePage/mainPage/OPC/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
f/web-kboss/src/views/homePage/mainPage/img/case/ocai-mascot.jpg
Normal file
BIN
f/web-kboss/src/views/homePage/mainPage/img/case/ocai-mascot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,7 @@
|
||||
<!-- <div class="search-box">
|
||||
<search></search>
|
||||
</div> -->
|
||||
<div style="width: 100%;">
|
||||
<div class="ncmatch-router-view">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
@ -239,6 +239,12 @@ export default Vue.extend({
|
||||
background-color: #f6f8fd;
|
||||
}
|
||||
|
||||
.ncmatch-router-view {
|
||||
width: 100%;
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 35px 0;
|
||||
width: 100%;
|
||||
|
||||
@ -750,6 +750,7 @@ export default {
|
||||
.plaza-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding-top: 82px;
|
||||
overflow-x: hidden;
|
||||
background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 60%, #f5f8ff 100%);
|
||||
color: #1a1a1a;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="hospital-page">
|
||||
<div class="banner">
|
||||
<img class="bg" src="./img/hospitalBanner.png" alt="">
|
||||
<div class="textBox">
|
||||
|
||||
@ -158,5 +158,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.train-page {
|
||||
padding-top: 82px;
|
||||
}
|
||||
|
||||
@import './train.css';
|
||||
</style>
|
||||
|
||||
@ -462,8 +462,10 @@ export default {
|
||||
console.log("生成的路径是", accessRoutes);
|
||||
router.addRoutes(accessRoutes);
|
||||
|
||||
// 根据角色跳转到不同页面
|
||||
if (org_type === "2" || org_type === "3") {
|
||||
// 登录过期或退出登录后，优先回到离开前的页面。
|
||||
if (this.redirectToSavedPage()) {
|
||||
// 已跳转到原页面
|
||||
} else if (org_type === "2" || org_type === "3") {
|
||||
this.$router.push("/product/productHome");
|
||||
} else if (response.roles.includes("运营")) {
|
||||
this.$router.push("/operation/supplierManagement");
|
||||
@ -740,6 +742,35 @@ export default {
|
||||
this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
|
||||
},
|
||||
|
||||
getLoginRedirectPath() {
|
||||
const queryRedirect = this.$route.query && this.$route.query.redirect
|
||||
const rawPath = Array.isArray(queryRedirect)
|
||||
? queryRedirect[0]
|
||||
: queryRedirect || sessionStorage.getItem('loginRedirectPath')
|
||||
if (!rawPath) return ''
|
||||
|
||||
let redirectPath = rawPath
|
||||
try {
|
||||
redirectPath = decodeURIComponent(rawPath)
|
||||
} catch (error) {
|
||||
redirectPath = rawPath
|
||||
}
|
||||
|
||||
if (!redirectPath || !redirectPath.startsWith('/') || redirectPath.includes('/login')) {
|
||||
sessionStorage.removeItem('loginRedirectPath')
|
||||
return ''
|
||||
}
|
||||
return redirectPath
|
||||
},
|
||||
|
||||
redirectToSavedPage() {
|
||||
const redirectPath = this.getLoginRedirectPath()
|
||||
if (!redirectPath) return false
|
||||
sessionStorage.removeItem('loginRedirectPath')
|
||||
this.$router.push(redirectPath)
|
||||
return true
|
||||
},
|
||||
|
||||
// 处理登录
|
||||
handleLogin(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
@ -776,8 +807,10 @@ export default {
|
||||
sessionStorage.setItem("org_type", res.org_type);
|
||||
sessionStorage.setItem("username", res['user'].username);
|
||||
|
||||
// 根据角色跳转到不同页面
|
||||
if (res.admin === 1) {
|
||||
// 登录过期或退出登录后，优先回到离开前的页面。
|
||||
if (this.redirectToSavedPage()) {
|
||||
// 已跳转到原页面
|
||||
} else if (res.admin === 1) {
|
||||
this.$router.push({ path: "/" });
|
||||
} else if (
|
||||
sessionStorage.getItem("org_type") == "2" ||
|
||||
|
||||
@ -10,28 +10,45 @@
|
||||
v-model="queryForm.modelName"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="搜索模型名称"
|
||||
placeholder="搜索模型/接口/描述"
|
||||
@keyup.enter.native="handleSearch"
|
||||
@clear="handleSearch"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="queryForm.modelType" size="small" placeholder="全部">
|
||||
<el-select v-model="queryForm.modelType" size="small" clearable filterable placeholder="全部" @change="handleSearch">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option label="文本生成" value="文本生成"></el-option>
|
||||
<el-option label="图像生成" value="图像生成"></el-option>
|
||||
<el-option label="语音合成" value="语音合成"></el-option>
|
||||
<el-option
|
||||
v-for="item in modelTypeOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="供应商">
|
||||
<el-select v-model="queryForm.provider" size="small" placeholder="全部">
|
||||
<el-select
|
||||
v-model="queryForm.provider"
|
||||
size="small"
|
||||
clearable
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
placeholder="选择或输入供应商"
|
||||
@change="handleSearch"
|
||||
>
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option label="OpenAI" value="OpenAI"></el-option>
|
||||
<el-option label="Google" value="Google"></el-option>
|
||||
<el-option label="开元云" value="开元云"></el-option>
|
||||
<el-option
|
||||
v-for="item in providerOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" type="primary">查询</el-button>
|
||||
<el-button size="small">重置</el-button>
|
||||
<el-button size="small" type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button size="small" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button size="small" type="primary" icon="el-icon-plus" @click="openAddDialog">添加</el-button>
|
||||
@ -39,7 +56,7 @@
|
||||
</section>
|
||||
|
||||
<section class="table-card">
|
||||
<el-tabs v-model="activeTab" class="config-tabs">
|
||||
<el-tabs v-model="activeTab" class="config-tabs" @tab-click="handleTabChange">
|
||||
<el-tab-pane label="待上架" name="pending"></el-tab-pane>
|
||||
<el-tab-pane label="已上架" name="listed"></el-tab-pane>
|
||||
</el-tabs>
|
||||
@ -68,12 +85,16 @@
|
||||
</el-table>
|
||||
|
||||
<div class="table-footer">
|
||||
<span>共 {{ displayTableData.length }} 条</span>
|
||||
<div class="pager">
|
||||
<el-button size="mini">上一页</el-button>
|
||||
<span>1 / 1</span>
|
||||
<el-button size="mini">下一页</el-button>
|
||||
</div>
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="filteredTableData.length"
|
||||
:current-page.sync="currentPage"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -100,13 +121,47 @@ export default {
|
||||
modelType: '',
|
||||
provider: ''
|
||||
},
|
||||
tableData: []
|
||||
tableData: [],
|
||||
modelTypeOptions: [],
|
||||
providerOptions: [],
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
displayTableData() {
|
||||
filteredTableData() {
|
||||
const targetStatus = this.activeTab === 'listed' ? 1 : 0
|
||||
return this.tableData.filter(item => Number(item.listing_status || 0) === targetStatus)
|
||||
const modelName = this.normalizeSearchText(this.queryForm.modelName)
|
||||
const modelType = this.normalizeSearchText(this.queryForm.modelType)
|
||||
const provider = this.normalizeSearchText(this.queryForm.provider)
|
||||
|
||||
return this.tableData.filter(item => {
|
||||
if (Number(item.listing_status || 0) !== targetStatus) return false
|
||||
|
||||
const apiDoc = item.api_doc || {}
|
||||
const nameText = this.normalizeSearchText([
|
||||
item.model_name,
|
||||
item.display_name,
|
||||
item.llmid,
|
||||
item.id,
|
||||
item.description,
|
||||
apiDoc.api_url,
|
||||
apiDoc.curl_code,
|
||||
apiDoc.python_code
|
||||
].join(' '))
|
||||
const typeText = this.normalizeSearchText(item.model_type)
|
||||
const providerText = this.normalizeSearchText(item.provider)
|
||||
|
||||
const nameMatched = !modelName || nameText.includes(modelName)
|
||||
const typeMatched = !modelType || typeText === modelType || typeText.includes(modelType)
|
||||
const providerMatched = !provider || providerText === provider
|
||||
|
||||
return nameMatched && typeMatched && providerMatched
|
||||
})
|
||||
},
|
||||
displayTableData() {
|
||||
const start = (this.currentPage - 1) * this.pageSize
|
||||
return this.filteredTableData.slice(start, start + this.pageSize)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -115,13 +170,45 @@ export default {
|
||||
methods: {
|
||||
// 获取模型信息配置列表
|
||||
async getModelInfoConfigList() {
|
||||
const res = await reqModelInfoConfigList()
|
||||
const res = await reqModelInfoConfigList({
|
||||
current_page: 1,
|
||||
page_size: 1000
|
||||
})
|
||||
console.log(res);
|
||||
if (res.status === true) {
|
||||
this.tableData = res.data.model_list
|
||||
const data = res.data || {}
|
||||
this.tableData = Array.isArray(data.model_list) ? data.model_list : []
|
||||
this.providerOptions = Array.isArray(data.provider_list) ? data.provider_list.filter(Boolean) : []
|
||||
this.modelTypeOptions = Array.isArray(data.model_type_list) ? data.model_type_list.filter(Boolean) : []
|
||||
this.currentPage = 1
|
||||
}
|
||||
|
||||
},
|
||||
normalizeSearchText(value) {
|
||||
return String(value || '').trim().toLowerCase()
|
||||
},
|
||||
handleSearch() {
|
||||
this.currentPage = 1
|
||||
},
|
||||
resetQuery() {
|
||||
this.queryForm = {
|
||||
modelName: '',
|
||||
modelType: '',
|
||||
provider: ''
|
||||
}
|
||||
this.currentPage = 1
|
||||
this.getModelInfoConfigList()
|
||||
},
|
||||
handleTabChange() {
|
||||
this.currentPage = 1
|
||||
},
|
||||
handleSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.currentPage = 1
|
||||
},
|
||||
handleCurrentChange(page) {
|
||||
this.currentPage = page
|
||||
},
|
||||
|
||||
openAddDialog() {
|
||||
this.$refs.editDialog.open()
|
||||
@ -238,7 +325,7 @@ export default {
|
||||
.table-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
padding: 12px 0 0;
|
||||
color: #667085;
|
||||
font-size: 13px;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="product-service-page" :class="{ 'single-product-page': isSinglePageMode }">
|
||||
<TopBox v-if="isSinglePageMode" class="single-page-topbox" />
|
||||
|
||||
<!-- 产品分类导航 -->
|
||||
<div v-if="!isSinglePageMode" class="category-nav">
|
||||
@ -228,7 +227,6 @@
|
||||
<script>
|
||||
import { reqNavList, reqNewHomeSync, reqNewHomeFestival } from "@/api/newHome";
|
||||
import { gotoYuanJingAPI } from '@/api/gotoYuanJing'
|
||||
import TopBox from '@/views/homePage/components/topBox/index.vue'
|
||||
|
||||
const getImageUrlPrefix = () => {
|
||||
const origin = window.location.origin
|
||||
@ -246,9 +244,6 @@ const getImageUrlPrefix = () => {
|
||||
|
||||
export default {
|
||||
name: "ProductServicePage",
|
||||
components: {
|
||||
TopBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
panelData: [],
|
||||
@ -270,7 +265,10 @@ export default {
|
||||
return this.isTokenMarketCategory(this.activeCategory);
|
||||
},
|
||||
isSinglePageMode() {
|
||||
return this.$route.path === '/tokenMarket' || this.$route.query.single === '1' || this.$route.query.single === 'true';
|
||||
return this.$route.path === '/tokenMarket' ||
|
||||
this.$route.path === '/homePage/tokenMarket' ||
|
||||
this.$route.query.single === '1' ||
|
||||
this.$route.query.single === 'true';
|
||||
},
|
||||
currentSubcategories() {
|
||||
if (!this.activeCategory || !this.panelData.length) return [];
|
||||
@ -531,7 +529,7 @@ export default {
|
||||
// 加载导航数据
|
||||
async loadNavData() {
|
||||
try {
|
||||
const response = await reqNavList({ url_link: window.location.href });
|
||||
const response = await reqNavList({ url_link: this.getNavRequestUrl() });
|
||||
if (response.status && response.data.product_service) {
|
||||
this.panelData = this.processNavData(response.data.product_service);
|
||||
}
|
||||
@ -541,6 +539,15 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
getNavRequestUrl() {
|
||||
if (!this.isSinglePageMode) {
|
||||
return window.location.href;
|
||||
}
|
||||
const baseUrl = window.location.href.split('#')[0];
|
||||
const homePath = window.location.hostname.includes('ncmatch.cn') ? '/ncmatchHome/index' : '/homePage/index';
|
||||
return `${baseUrl}#${homePath}`;
|
||||
},
|
||||
|
||||
// 处理导航数据 - 修复数据结构
|
||||
processNavData(data) {
|
||||
return data.map((category, categoryIndex) => {
|
||||
@ -897,31 +904,24 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
.product-service-page {
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
padding: 82px 24px 24px;
|
||||
background: #fff;
|
||||
min-height: calc(100vh - 100px);
|
||||
|
||||
&.single-product-page {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
padding: 28px;
|
||||
padding: 82px 0 0;
|
||||
background: linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.single-page-topbox {
|
||||
width: 100vw;
|
||||
margin: -28px calc(50% - 50vw) 24px;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
max-width: 1180px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
margin: 24px auto 0;
|
||||
padding-right: 28px;
|
||||
padding-bottom: 40px;
|
||||
padding-left: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user