opc
This commit is contained in:
parent
69c760421c
commit
cc1fc8575d
@ -11,7 +11,7 @@ import {getHomePath} from "@/views/setting/tools";
|
||||
|
||||
NProgress.configure({showSpinner: false}); // NProgress Configuration
|
||||
|
||||
const whiteList = ["product", "/tokenMarket", "/modelDetail", "/modelApiDocument", "/login", "/homePage", "/registrationPage", "/shoppingCart", "/homePageImage","/h5HomePage",'/H5about','/modelProductDetail','/ncmatchHome', '/agreement']; // no redirect whitelist
|
||||
const whiteList = ["product", "/tokenMarket", "/modelDetail", "/modelApiDocument", "/login", "/homePage", "/registrationPage", "/shoppingCart", "/homePageImage","/h5HomePage",'/H5about','/modelProductDetail','/ncmatchHome', '/agreement', '/ncmatch']; // no redirect whitelist
|
||||
|
||||
// 获取用户代理字符串
|
||||
const userAgent = window.navigator.userAgent;
|
||||
|
||||
@ -259,17 +259,36 @@ export const constantRoutes = [
|
||||
{
|
||||
hidden: true,
|
||||
path: '/ncmatchHome',
|
||||
component: () => import('@/views/homePage/ncmatch/index.vue'),
|
||||
component: () => import('@/views/Ncmatch/HomeIndex.vue'),
|
||||
name: 'ncmatchHome',
|
||||
redirect: '/ncmatchHome/index',
|
||||
meta: { fullPath: '/ncmatchHome/index', title: '官网首页', noCache: true, icon: 'el-icon-s-home' },
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/homePage/ncmatch/mainPage/index.vue'),
|
||||
component: () => import('@/views/Ncmatch/index.vue'),
|
||||
name: 'ncmatchPageIndex',
|
||||
hidden: true,
|
||||
meta: { title: '首页', fullPath: '/ncmatch/mainPage/index' }
|
||||
meta: { title: '首页', fullPath: '/ncmatch/mainPage/index' },
|
||||
},
|
||||
{
|
||||
path: 'opcOverview',
|
||||
component: () => import('@/views/Ncmatch/opcOverview.vue'),
|
||||
name: 'ncmatchOpcOverview',
|
||||
meta: { title: 'OPC社区概况', fullPath: '/ncmatch/opcOverview', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'societyNews',
|
||||
component: () => import('@/views/Ncmatch/SocietyNewsBrief.vue'),
|
||||
name: 'ncmatchSocietyNews',
|
||||
meta: { title: '政社快讯', fullPath: '/ncmatch/societyNews', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'tokenMarket',
|
||||
component: () => import('@/views/product/allProduct/index.vue'),
|
||||
name: 'homePageTokenMarket',
|
||||
hidden: true,
|
||||
meta: { title: 'TOKEN市集', onCache: true }
|
||||
},
|
||||
{
|
||||
path: 'supplyAndDemandSquare',
|
||||
@ -481,6 +500,28 @@ export const constantRoutes = [
|
||||
* 需要根据用户角色动态加载的路由
|
||||
*/
|
||||
export const asyncRoutes = [
|
||||
// NCMatch
|
||||
{
|
||||
path: '/ncmatch',
|
||||
component: () => import('@/views/Ncmatch/HomeIndex.vue'),
|
||||
name: 'ncmatch',
|
||||
redirect: '/ncmatch/opcOverview',
|
||||
meta: { title: 'NCMatch', fullPath: '/ncmatch', noCache: true },
|
||||
children: [
|
||||
{
|
||||
path: 'opcOverview',
|
||||
component: () => import('@/views/Ncmatch/opcOverview.vue'),
|
||||
name: 'ncmatchOpcOverview',
|
||||
meta: { title: 'OPC社区概况', fullPath: '/ncmatch/opcOverview', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'societyNews',
|
||||
component: () => import('@/views/Ncmatch/SocietyNewsBrief.vue'),
|
||||
name: 'ncmatchSocietyNews',
|
||||
meta: { title: '政社快讯', fullPath: '/ncmatch/societyNews', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
// 财务——财务概览
|
||||
{
|
||||
path: '/financialOverview',
|
||||
|
||||
@ -0,0 +1,594 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:fullscreen="true"
|
||||
custom-class="mobile-consult-fullscreen-dialog"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="!submitSuccess"
|
||||
:show-close="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div v-if="submitSuccess" class="submit-success-page">
|
||||
<div class="success-icon">
|
||||
<i class="el-icon-check"></i>
|
||||
</div>
|
||||
<h2 class="success-title">已完成</h2>
|
||||
<p class="success-desc">您的咨询信息已提交，我们会尽快与您联系。</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="mobile-consult-wrap">
|
||||
<h2 class="mobile-consult-title">{{ title }}</h2>
|
||||
<p class="mobile-consult-subtitle">期待与您开启AI创新未来</p>
|
||||
|
||||
<el-form
|
||||
ref="consultForm"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
class="mobile-consult-form"
|
||||
>
|
||||
<el-form-item label="1. 请填写您的姓名" prop="name">
|
||||
<el-input
|
||||
v-model.trim="formData.name"
|
||||
maxlength="20"
|
||||
placeholder="请输入您的姓名"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="2. 请填写您的联系方式" prop="phone">
|
||||
<el-input
|
||||
v-model.trim="formData.phone"
|
||||
maxlength="11"
|
||||
placeholder="请输入您的联系电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="3. 请填写您的邮箱" prop="email">
|
||||
<el-input
|
||||
v-model.trim="formData.email"
|
||||
maxlength="60"
|
||||
placeholder="请输入您的邮箱"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="4. 请填写您的公司名称" prop="company">
|
||||
<el-input
|
||||
v-model.trim="formData.company"
|
||||
maxlength="80"
|
||||
placeholder="请输入您的公司名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="5. 请选择您的企业类型（单选）" prop="enterprise_type">
|
||||
<el-radio-group v-model="formData.enterprise_type" class="option-grid">
|
||||
<el-radio
|
||||
v-for="item in enterpriseOptions"
|
||||
:key="item.id"
|
||||
:label="String(item.id)"
|
||||
class="option-item"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="6. 请选择您所在的省份（单选）" prop="region">
|
||||
<el-select
|
||||
:key="provinceSelectKey"
|
||||
v-model="formData.region"
|
||||
filterable
|
||||
placeholder="输入省份名称搜索..."
|
||||
class="full-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in provinceOptions"
|
||||
:key="`region-${item.id}-${item.name}`"
|
||||
:label="item.name"
|
||||
:value="String(item.id)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="7. 您想咨询的方向（可多选）">
|
||||
<el-checkbox-group v-model="formData.consult_direction_list" class="direction-list">
|
||||
<el-checkbox
|
||||
v-for="item in consultDirectionOptions"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
class="direction-item"
|
||||
>
|
||||
<span class="direction-main">{{ item.title }}</span>
|
||||
<span class="direction-sub">{{ item.desc }}</span>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="8. 如果您有其他问题需要咨询，请留言">
|
||||
<el-input
|
||||
v-model.trim="formData.content"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 5 }"
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
placeholder="请输入您想咨询的内容..."
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="qrcode-area">
|
||||
<p>长按二维码添加微信，获取专属服务</p>
|
||||
<img src="@/assets/image/newkefu.png" alt="官方客服二维码">
|
||||
</div>
|
||||
|
||||
<el-checkbox v-model="formData.checked" class="privacy-checkbox">
|
||||
<span>
|
||||
您填写的信息仅用于本次业务对接沟通，公司将严格落实信息安全保护机制，不泄露、不滥用您的任何个人资料。
|
||||
</span>
|
||||
</el-checkbox>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
class="submit-btn"
|
||||
:loading="loading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
提交咨询
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reqConsultForm, reqProductConsult } from '@/api/H5'
|
||||
|
||||
export default {
|
||||
name: 'MobileFullScreenConsultDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '开元云科技合作咨询'
|
||||
},
|
||||
qrCode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
currentUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
submitApi: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const validatePhone = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入联系电话'))
|
||||
} else if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
loading: false,
|
||||
formData: this.getInitialFormData(),
|
||||
enterpriseOptions: [],
|
||||
provinceOptions: [],
|
||||
provinceSelectKey: 0,
|
||||
consultDirectionOptions: [],
|
||||
submitSuccess: false,
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
company: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
|
||||
enterprise_type: [{ required: true, message: '请选择企业类型', trigger: 'change' }],
|
||||
region: [{ required: true, message: '请选择所在省份', trigger: 'change' }]
|
||||
},
|
||||
originalOverflow: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:visible', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.resetForm()
|
||||
this.fetchConsultOptions()
|
||||
this.disableBodyScroll()
|
||||
} else {
|
||||
this.enableBodyScroll()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getInitialFormData() {
|
||||
return {
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
company: '',
|
||||
enterprise_type: '',
|
||||
region: '',
|
||||
consult_direction_list: [],
|
||||
content: '',
|
||||
checked: false
|
||||
}
|
||||
},
|
||||
resetForm() {
|
||||
this.formData = this.getInitialFormData()
|
||||
this.submitSuccess = false
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.consultForm) this.$refs.consultForm.clearValidate()
|
||||
})
|
||||
},
|
||||
disableBodyScroll() {
|
||||
this.originalOverflow = document.body.style.overflow
|
||||
document.body.style.overflow = 'hidden'
|
||||
},
|
||||
enableBodyScroll() {
|
||||
document.body.style.overflow = this.originalOverflow || ''
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.$emit('close')
|
||||
},
|
||||
normalizeDictOptions(list, type) {
|
||||
return list
|
||||
.filter(item => item && item.dict_type === type)
|
||||
.sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0))
|
||||
.map(item => ({
|
||||
id: String(item.dict_key),
|
||||
name: item.dict_value_zh
|
||||
}))
|
||||
},
|
||||
normalizeDirectionOptions(list) {
|
||||
return list
|
||||
.filter(item => item && item.dict_type === 'direction')
|
||||
.sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0))
|
||||
.map(item => {
|
||||
const value = item.dict_value_zh || ''
|
||||
const match = value.match(/^(.+?)（(.+?)）$/)
|
||||
return {
|
||||
id: String(item.dict_key),
|
||||
name: value,
|
||||
title: match ? match[1] : value,
|
||||
desc: match ? match[2] : ''
|
||||
}
|
||||
})
|
||||
},
|
||||
extractConsultOptionList(res) {
|
||||
if (res && Array.isArray(res.data)) return res.data
|
||||
if (res && res.data && Array.isArray(res.data.data)) return res.data.data
|
||||
return []
|
||||
},
|
||||
async fetchConsultOptions() {
|
||||
try {
|
||||
const res = await reqConsultForm()
|
||||
const list = this.extractConsultOptionList(res)
|
||||
if (!list.length) return
|
||||
|
||||
const enterpriseOptions = this.normalizeDictOptions(list, 'enterprise_type')
|
||||
const provinceOptions = this.normalizeDictOptions(list, 'region')
|
||||
const consultDirectionOptions = this.normalizeDirectionOptions(list)
|
||||
|
||||
if (enterpriseOptions.length) this.enterpriseOptions = enterpriseOptions
|
||||
if (provinceOptions.length) {
|
||||
this.provinceOptions = provinceOptions
|
||||
this.provinceSelectKey += 1
|
||||
if (this.formData.region && !provinceOptions.some(item => item.id === String(this.formData.region))) {
|
||||
this.formData.region = ''
|
||||
}
|
||||
}
|
||||
if (consultDirectionOptions.length) this.consultDirectionOptions = consultDirectionOptions
|
||||
} catch (error) {
|
||||
// 保留本地兜底选项，避免接口异常时无法填写表单。
|
||||
}
|
||||
},
|
||||
buildSubmitPayload() {
|
||||
return {
|
||||
custom_type: this.formData.custom_type,
|
||||
name: this.formData.name,
|
||||
phone: this.formData.phone,
|
||||
email: this.formData.email,
|
||||
company: this.formData.company,
|
||||
enterprise_type: this.formData.enterprise_type,
|
||||
region: this.formData.region,
|
||||
consult_direction: this.formData.consult_direction_list.join(','),
|
||||
content: this.formData.content,
|
||||
source: '公众号',
|
||||
url_link: this.currentUrl || window.location.href
|
||||
}
|
||||
},
|
||||
async handleSubmit() {
|
||||
if (!this.formData.checked) {
|
||||
this.$message.warning('请先勾选信息安全与隐私保护说明')
|
||||
return
|
||||
}
|
||||
this.$refs.consultForm.validate(async valid => {
|
||||
if (!valid) return
|
||||
this.loading = true
|
||||
try {
|
||||
const payload = this.buildSubmitPayload()
|
||||
const response = this.submitApi ? await this.submitApi(payload) : await reqProductConsult(payload)
|
||||
if (response && (response.status === true || response.status === 'true')) {
|
||||
this.$emit('success', response)
|
||||
this.submitSuccess = true
|
||||
} else {
|
||||
this.$message.error((response && response.msg) || '提交失败，请稍后再试')
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('提交失败，请稍后再试')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.enableBodyScroll()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
::v-deep .mobile-consult-fullscreen-dialog {
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: 100vh;
|
||||
border-radius: 0;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 14px 14px 8px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
height: calc(100vh - 60px);
|
||||
padding: 12px 14px 18px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-consult-wrap {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.submit-success-page {
|
||||
min-height: calc(100vh - 110px);
|
||||
padding: 80px 24px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 14px 28px rgba(34, 197, 94, 0.22);
|
||||
|
||||
i {
|
||||
font-size: 46px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.success-title {
|
||||
margin: 24px 0 10px;
|
||||
color: #111827;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mobile-consult-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.mobile-consult-subtitle {
|
||||
margin: 6px 0 16px;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.mobile-consult-form {
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content,
|
||||
::v-deep .el-input,
|
||||
::v-deep .el-select,
|
||||
::v-deep .el-textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
padding-bottom: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__error {
|
||||
position: static;
|
||||
padding-top: 6px;
|
||||
line-height: 1.25;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item.is-error .el-input__inner,
|
||||
::v-deep .el-form-item.is-error .el-textarea__inner {
|
||||
border-color: #f56c6c;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
.option-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin-right: 0 !important;
|
||||
padding: 9px 8px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
padding-left: 6px;
|
||||
font-size: 12px;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
.full-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.direction-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.direction-item {
|
||||
margin-right: 0 !important;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.direction-main {
|
||||
font-size: 14px;
|
||||
color: #111827;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.direction-sub {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.qrcode-area {
|
||||
margin: 16px 0;
|
||||
text-align: center;
|
||||
padding: 18px 0;
|
||||
background: #f7f8fa;
|
||||
border-radius: 12px;
|
||||
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed #3b82f6;
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-checkbox {
|
||||
margin: 0 0 14px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
::v-deep .el-checkbox__input {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
padding-left: 8px;
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: #111827;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
42
f/web-kboss/src/views/H5/consultDialogFullPreview/index.vue
Normal file
42
f/web-kboss/src/views/H5/consultDialogFullPreview/index.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="consult-full-preview">
|
||||
|
||||
|
||||
<mobile-full-screen-consult-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:current-url="currentUrl"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MobileFullScreenConsultDialog from '../components/H5_dialog/MobileFullScreenConsultDialog.vue'
|
||||
|
||||
export default {
|
||||
name: 'ConsultDialogFullPreview',
|
||||
components: { MobileFullScreenConsultDialog },
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentUrl() {
|
||||
return window.location.href
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.consult-full-preview {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.preview-actions {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
40
f/web-kboss/src/views/Ncmatch/HomeIndex.vue
Normal file
40
f/web-kboss/src/views/Ncmatch/HomeIndex.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<topNav />
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
|
||||
<div class="content">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topNav from './topNav.vue';
|
||||
export default {
|
||||
name: 'ComponentName',
|
||||
components: { topNav },
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
360
f/web-kboss/src/views/Ncmatch/OpcJoinDialog.vue
Normal file
360
f/web-kboss/src/views/Ncmatch/OpcJoinDialog.vue
Normal file
@ -0,0 +1,360 @@
|
||||
<template>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
:show-close="false"
|
||||
custom-class="opc-application-dialog"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div class="dialog-layout">
|
||||
<!-- 头部 -->
|
||||
<header class="dialog-header">
|
||||
<div class="header-info">
|
||||
<h2 class="header-title">紫东数智OPC社区入驻申请表</h2>
|
||||
<p class="header-desc">请如实填写以下信息，我们将尽快与您联系</p>
|
||||
</div>
|
||||
<button type="button" class="close-btn" @click="handleClose">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 6L6 18M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- 主体 -->
|
||||
<main class="dialog-body">
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-position="top" class="opc-form">
|
||||
<!-- 第一部分：企业基本信息 -->
|
||||
<section class="form-section">
|
||||
<h3 class="section-title">
|
||||
<span class="section-num">1</span>
|
||||
企业基本信息
|
||||
</h3>
|
||||
<div class="grid-2">
|
||||
<el-form-item label="企业名称" prop="company_name">
|
||||
<el-input
|
||||
v-model="formData.company_name"
|
||||
placeholder="请输入企业名称"
|
||||
maxlength="100"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input
|
||||
v-model="formData.credit_code"
|
||||
placeholder="请输入统一社会信用代码"
|
||||
maxlength="18"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="成立时间">
|
||||
<el-date-picker
|
||||
v-model="formData.est_date"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
class="full-width"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="从业人数（人）">
|
||||
<el-input
|
||||
v-model.number="formData.employee_count"
|
||||
type="number"
|
||||
placeholder="请输入从业人数"
|
||||
min="1"
|
||||
/>
|
||||
<p class="field-tip">以最近一个月实际缴纳社保为准</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业性质" class="col-span-2">
|
||||
<div class="checkbox-group">
|
||||
<label
|
||||
v-for="item in companyTypeOptions"
|
||||
:key="item"
|
||||
class="checkbox-label"
|
||||
:class="{ active: formData.company_type.includes(item) }"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="item"
|
||||
v-model="formData.company_type"
|
||||
/>
|
||||
<span>{{ item }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属细分行业" class="col-span-2">
|
||||
<el-input
|
||||
v-model="formData.industry"
|
||||
placeholder="请输入所属细分行业"
|
||||
maxlength="100"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="注册地址">
|
||||
<el-input
|
||||
v-model="formData.reg_address"
|
||||
placeholder="请输入注册地址"
|
||||
maxlength="200"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="办公地址">
|
||||
<el-input
|
||||
v-model="formData.office_address"
|
||||
placeholder="请输入办公地址"
|
||||
maxlength="200"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业简介（不超过1000字）" class="col-span-2">
|
||||
<el-input
|
||||
v-model="formData.company_intro"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
maxlength="1000"
|
||||
show-word-limit
|
||||
placeholder="请简要介绍企业主营业务、发展历程、核心优势等"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第二部分：创始人信息 -->
|
||||
<section class="form-section">
|
||||
<h3 class="section-title">
|
||||
<span class="section-num">2</span>
|
||||
创始人信息
|
||||
</h3>
|
||||
<div class="grid-2">
|
||||
<el-form-item label="单一创始人姓名" prop="founder_name">
|
||||
<el-input
|
||||
v-model="formData.founder_name"
|
||||
placeholder="请输入创始人姓名"
|
||||
maxlength="50"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="经股权穿透后合计持股比例（%）">
|
||||
<el-input
|
||||
v-model.number="formData.shareholding_ratio"
|
||||
type="number"
|
||||
placeholder="请输入持股比例"
|
||||
min="0"
|
||||
max="100"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="founder_phone">
|
||||
<el-input
|
||||
v-model="formData.founder_phone"
|
||||
placeholder="请输入联系电话"
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创始人在企业的技术创新、战略决策和主要业务执行中发挥主导作用情况" class="col-span-2">
|
||||
<el-input
|
||||
v-model="formData.founder_role"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请说明创始人在企业技术创新、战略决策和主要业务执行中发挥的主导作用"
|
||||
maxlength="500"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传相关证明文件（可选）" class="col-span-2">
|
||||
<div class="file-upload-area">
|
||||
<label class="upload-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
|
||||
</svg>
|
||||
<span>选择文件</span>
|
||||
<input
|
||||
type="file"
|
||||
class="hidden"
|
||||
accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
|
||||
@change="handleFileChange($event, 'founder_file_list')"
|
||||
/>
|
||||
</label>
|
||||
<div class="file-list">
|
||||
<div
|
||||
v-for="(file, index) in formData.founder_file_list"
|
||||
:key="index"
|
||||
class="file-item"
|
||||
>
|
||||
<span class="file-name">{{ file.name }}</span>
|
||||
<button type="button" class="file-remove" @click="removeFile(index, 'founder_file_list')">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="核心技术情况" class="col-span-2">
|
||||
<el-input
|
||||
v-model="formData.core_tech"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="以人工智能技术作为核心生产工具与关键驱动力，利用大模型、智能体、AI开发工具等，完成核心产品开发"
|
||||
maxlength="500"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第三部分：联系人信息 -->
|
||||
<section class="form-section">
|
||||
<h3 class="section-title">
|
||||
<span class="section-num">3</span>
|
||||
联系人信息
|
||||
</h3>
|
||||
<div class="grid-3">
|
||||
<el-form-item label="联系人姓名" prop="contact_name">
|
||||
<el-input
|
||||
v-model="formData.contact_name"
|
||||
placeholder="请输入联系人姓名"
|
||||
maxlength="50"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="职务">
|
||||
<el-input
|
||||
v-model="formData.job_title"
|
||||
placeholder="请输入职务"
|
||||
maxlength="50"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="contact_phone">
|
||||
<el-input
|
||||
v-model="formData.contact_phone"
|
||||
placeholder="请输入联系电话"
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
</el-form>
|
||||
</main>
|
||||
|
||||
<!-- 底部 -->
|
||||
<footer class="dialog-footer">
|
||||
<el-button type="default" @click="saveDraft">保存草稿</el-button>
|
||||
<el-button type="default" @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="submitForm">提交申请</el-button>
|
||||
</footer>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OpcApplicationForm',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const validatePhone = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入联系电话'))
|
||||
} else if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
submitting: false,
|
||||
companyTypeOptions: ['国有企业', '国有控股企业', '私营企业', '外资企业', '合资企业', '个体工商户', '其他'],
|
||||
formData: {
|
||||
company_name: '',
|
||||
credit_code: '',
|
||||
est_date: '',
|
||||
employee_count: null,
|
||||
company_type: [],
|
||||
industry: '',
|
||||
reg_address: '',
|
||||
office_address: '',
|
||||
company_intro: '',
|
||||
founder_name: '',
|
||||
shareholding_ratio: null,
|
||||
founder_phone: '',
|
||||
founder_role: '',
|
||||
founder_file_list: [],
|
||||
core_tech: '',
|
||||
contact_name: '',
|
||||
job_title: '',
|
||||
contact_phone: ''
|
||||
},
|
||||
rules: {
|
||||
company_name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
|
||||
founder_name: [{ required: true, message: '请输入创始人姓名', trigger: 'blur' }],
|
||||
founder_phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
|
||||
contact_name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
|
||||
contact_phone: [{ required: true, validator: validatePhone, trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
if (val) {
|
||||
this.loadDraft()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.$emit('close')
|
||||
},
|
||||
handleFileChange(event, field) {
|
||||
const files = Array.from(event.target.files)
|
||||
if (files.length) {
|
||||
this.formData[field] = [...this.formData[field], ...files]
|
||||
}
|
||||
event.target.value = ''
|
||||
},
|
||||
removeFile(index, field) {
|
||||
this.formData[field].splice(index, 1)
|
||||
},
|
||||
saveDraft() {
|
||||
localStorage.setItem('opc_application_draft', JSON.stringify(this.formData))
|
||||
this.$message.success('草稿已保存')
|
||||
},
|
||||
loadDraft() {
|
||||
try {
|
||||
const draft = localStorage.getItem('opc_application_draft')
|
||||
if (draft) {
|
||||
const data = JSON.parse(draft)
|
||||
this.formData = { ...this.formData, ...data }
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (!valid) return
|
||||
this.submitting = true
|
||||
try {
|
||||
// TODO: 调用提交接口
|
||||
console.log('提交数据:', this.formData)
|
||||
this.$message.success('提交成功')
|
||||
localStorage.removeItem('opc_application_draft')
|
||||
this.handleClose()
|
||||
} catch (e) {
|
||||
this.$message.error('提交失败，请重试')
|
||||
} finally {
|
||||
this.submitting = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import url('./less/OpcJoinDialog.less');
|
||||
</style>
|
||||
266
f/web-kboss/src/views/Ncmatch/SocietyNewsBrief.vue
Normal file
266
f/web-kboss/src/views/Ncmatch/SocietyNewsBrief.vue
Normal file
@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<div class="society-news-page">
|
||||
<div class="news-container">
|
||||
<div class="news-header">
|
||||
<h1 class="news-title">政社快讯</h1>
|
||||
<p class="news-subtitle">第一时间追踪 OPC 政策风向与社区动态，助力创业者精准把握发展机遇</p>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<button v-for="tab in filterTabs" :key="tab.key" type="button" class="filter-btn"
|
||||
:class="{ active: activeFilter === tab.key }" @click="filterActivities(tab.key)">
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="activity-list" id="activity-list">
|
||||
<div v-for="(item, index) in filteredActivities" :key="item.id" class="activity-card glass-card"
|
||||
:data-tag="item.tag" @click="openDetail(item)">
|
||||
<div class="activity-row">
|
||||
<div class="activity-date">
|
||||
<div class="date-block" :class="['date-block-' + item.theme]">
|
||||
<span class="date-day">{{ item.day }}</span>
|
||||
<span class="date-month">{{ item.month }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-main">
|
||||
<div class="activity-meta">
|
||||
<span class="tag" :class="['tag-' + item.theme]">{{ item.tag }}</span>
|
||||
<span class="meta-source">{{ item.source }}</span>
|
||||
</div>
|
||||
<h3 class="activity-title">{{ item.title }}</h3>
|
||||
<p class="activity-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
<div class="activity-arrow">
|
||||
<svg class="arrow-icon" width="20" height="20" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<transition name="detail-fade">
|
||||
<div v-if="detailVisible && currentDetail" class="detail-overlay" @click.self="closeDetail">
|
||||
<div class="detail-panel">
|
||||
<!-- 弹窗头部 -->
|
||||
<div class="detail-sticky-header">
|
||||
<div class="detail-header-left">
|
||||
<span class="detail-tag" :class="['tag-' + currentDetail.theme]">{{ currentDetail.tag }}</span>
|
||||
<span class="detail-publisher">{{ currentDetail.source }}</span>
|
||||
</div>
|
||||
<button class="detail-close" @click="closeDetail" aria-label="关闭">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗内容 -->
|
||||
<div class="detail-body">
|
||||
<h2 class="detail-title">{{ currentDetail.title }}</h2>
|
||||
|
||||
<div class="detail-meta">
|
||||
<span v-if="currentDetail.location" class="detail-meta-item">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
{{ currentDetail.location }}
|
||||
</span>
|
||||
<span v-if="currentDetail.date" class="detail-meta-item">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
{{ currentDetail.date }}
|
||||
</span>
|
||||
<a v-if="currentDetail.url" :href="currentDetail.url" target="_blank" rel="noopener noreferrer"
|
||||
class="detail-meta-item detail-meta-link">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
原文链接
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="detail-content" v-html="currentDetail.content"></div>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗底部 -->
|
||||
<div class="detail-sticky-footer">
|
||||
<button class="btn-close" @click="closeDetail">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SocietyNewsBrief',
|
||||
data() {
|
||||
return {
|
||||
detailVisible: false,
|
||||
currentDetail: null,
|
||||
activeFilter: 'all',
|
||||
filterTabs: [
|
||||
{ key: 'all', label: '全部快讯' },
|
||||
{ key: '政策动态', label: '政策动态' },
|
||||
{ key: '社区动态', label: '社区动态' }
|
||||
],
|
||||
activities: [
|
||||
{
|
||||
id: 'policy1',
|
||||
tag: '政策动态',
|
||||
theme: 'blue',
|
||||
day: '18',
|
||||
month: '2026.06',
|
||||
source: '北京市经济和信息化局',
|
||||
location: '北京市',
|
||||
date: '2026年6月18日',
|
||||
url: 'https://jxj.beijing.gov.cn/zwgk/2024zcwj/202606/t20260618_4706233.html',
|
||||
title: '北京市正式印发《支持人工智能OPC创新发展行动方案》（试行）',
|
||||
desc: '北京市经济和信息化局正式印发《支持人工智能OPC创新发展行动方案》（试行），从培育孵化、算力支撑、场景开放、融资渠道、人才引进五大维度系统构建OPC创业支持体系。',
|
||||
content: `
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
为落实国家"人工智能＋"战略，构建活跃开放的人工智能创新创业生态，支持青年人才创新创业，助力超级经济个体（OPC）快速成长，近日，北京市经济和信息化局正式印发<strong style="color:#111827;">《支持人工智能OPC创新发展行动方案》（试行）</strong>。方案围绕支持创办OPC企业、建设OPC社区、发放"全栈资源包"、加强融资增信赋能、强化赛事培优赋能、举办全球OPC共创节、深化合规引导赋能、支持高校设立OPC微专业八大重点领域，出台8条支持举措。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">北京市经济和信息化局关于印发《支持人工智能OPC创新发展行动方案（试行）》的通知</strong>
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">各区中小企业主管部门、各有关单位：</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">现将《支持人工智能OPC创新发展行动方案（试行）》印发给你们，请结合实际认真贯彻落实。</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">北京市经济和信息化局</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">2026年6月17日</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">《支持人工智能OPC创新发展行动方案》（试行）</strong>
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
为深入贯彻落实国家"人工智能＋"战略部署，加快构建活跃开放的人工智能创新创业生态，支持青年人才创新创业，培育一批AI驱动、小而精、专而强的创新主体，助力更多超级经济个体（OPC）快速成长，壮大本市中小企业科技创新力量，制定本行动方案。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">一、支持创办智能体开发</strong>、AIGC产品创制、大模型微调、AI行业落地应用等领域的OPC企业。依托北京市中小企业公共服务平台，打造"OPC开办服务专区"，提供开办指引、社区入驻、政策辅导和订单对接等全链条服务。联合高校、产业园区、龙头企业，开展OPC创业"校园行""园区行""企业行"，通过政策宣讲、案例分享、技术培训等，鼓励各类科技人才创办OPC。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">二、出台OPC成长社区建设指引</strong>，支持社区自建词元（Token）服务平台或链接智算服务机构、数字员工服务平台，为OPC企业提供AI工具集、高质量数据集、优惠算力、低成本办公空间、创业服务包等配套服务，对于服务成效突出的OPC社区，最高给予200万元资金支持。鼓励新一代信息技术企业依托存量技术人才与产业生态资源，探索建设企业内部OPC社区。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">三、通过OPC成长社区为入驻OPC企业发放"全栈资源包"</strong>，包含Token券（模型券）、算力券、数据券等。入驻企业可免费享受3个月的模型使用、智能算力使用、数据代采赠送等服务（单个企业合计最高不超过10万元）。OPC成长社区可按季度申请兑付，每个社区每年最高不超过1000万元。对通过北京人工智能数据沙盒服务平台开展数据治理和模型应用的OPC企业，可享受50%服务费减免。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">四、依托北京市企业融资综合信用服务平台设立"OPC金融服务专区"</strong>，提供担保增信、融资撮合、政策对接等服务。联合金融机构开发适配OPC企业的专属信贷产品"OPC贷"，综合运用Token消耗数据、赛事获奖情况、创始人征信报告、自主知识产权与自研技术成果等内容，为企业提供增信支持。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">五、联合一批投资机构举办"创赢未来"OPC专场路演活动</strong>，由OPC社区推荐OPC企业参赛。针对参赛企业提供"创训营"综合赋能服务，对路演通过的OPC项目，最高给予1000万元资金支持。依托"创客北京""京彩大创"设立OPC专项赛道，对于优质项目最高给予50万元资金支持。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">六、举办全球OPC共创节</strong>，通过AI黑客松、AI工作坊、项目路演、大咖分享、成果发布等系列活动，为OPC企业提供项目展示的国际舞台和资源对接平台，打造连接开发者、创作者、企业与大众的创新生态。支持符合条件OPC企业参加中小企业服务券服务商遴选，依托服务券政策，推动其产品在中小企业中落地应用。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">七、编制OPC合规指引</strong>，梳理财税管理、知识产权、算法备案、跨境出海等领域的风险要点，明确合规要求和操作规范。联合专业服务机构开展"合规服务进社区"活动，通过合规咨询、实操指导，推动合规服务深度对接，提升OPC企业合规经营意识与风险防控能力。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">八、支持高校依托学科特色设立OPC微专业</strong>，聚焦"人工智能大模型工程应用＋OPC创业实践"，构建"AI通识＋政策解读＋场景实战"课程体系，推行校企"双师制"教学，推动形成"学科建设—产业需求—人才培养"闭环育人体系，打造校企政合作共建的实训基地。鼓励OPC社区开办"夜校""加速营"等OPC创业培训。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0;">
|
||||
本方案自印发之日起试行，由北京市经济和信息化局负责解释。
|
||||
</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'policy2',
|
||||
tag: '政策动态',
|
||||
theme: 'green',
|
||||
day: '10',
|
||||
month: '2026.07',
|
||||
source: '石景山区人民政府',
|
||||
location: '石景山区',
|
||||
date: '2026年7月10日',
|
||||
url: '',
|
||||
title: '石景山区关于支持OPC创业生态发展的若干措施',
|
||||
desc: '石景山区出台专项措施支持OPC创业生态发展，涵盖入驻补贴、算力支持、融资对接、人才保障等多项扶持政策，打造OPC创业首选地。',
|
||||
content: `
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
石景山区人民政府正式出台《关于支持OPC创业生态发展的若干措施》，围绕OPC企业入驻、算力支撑、融资渠道、人才保障等关键环节，推出多项专项扶持政策，旨在将石景山区打造为北京OPC创业首选地。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">一、办公空间支持。</strong>新入驻 OPC 企业首年办公租金全免，第二年减免50%，第三年减免30%，，单家最高可节省租金支出约500万元。符合条件的企业可优先入驻石景山区人工智能产业园，享受"一事一议"专项支持。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">二、算力补贴政策。</strong>联合区内智算中心为OPC企业提供专项算力包，单家最高补贴200万元/年。企业可享受不高于市场价的80%算力采购折扣，同时可申请算力"先用后付"试点服务。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">三、融资对接机制。</strong>设立 OPC 创投联盟，搭建"基金 + 直投"双轨融资通道。区级产业发展基金优先跟投优质OPC项目，单笔跟投最高5000万元。定期举办OPC项目路演及资本对接会。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">四、人才引进保障。</strong>为OPC企业引进的高层次人才提供最高100万元安家补贴，在住房、子女入学、医疗等方面给予优先保障。设立"石景山OPC人才服务专线"，提供一对一政策咨询服务。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;margin-bottom:0;">
|
||||
<strong style="color:#111827;">五、政务绿色通道。</strong>开通 OPC 项目"绿色通道"，实行专班专员全程服务，企业注册、资质审批、政策申报等事项平均提速50%以上。
|
||||
</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'community1',
|
||||
tag: '社区动态',
|
||||
theme: 'violet',
|
||||
day: '14',
|
||||
month: '2026.07',
|
||||
source: '紫东数智OPC社区',
|
||||
location: '北京市',
|
||||
date: '2026年7月14日',
|
||||
url: '',
|
||||
title: '紫东数智OPC社区正式揭牌',
|
||||
desc: '紫东数智OPC社区正式揭牌成立，标志着北京OPC创业生态建设迈入新阶段。社区由中关村数智人工智能产业联盟与紫东太初联合打造，致力于构建集科研创新、项目孵化、创业加速与产业转化于一体的新型生态社区。',
|
||||
content: `
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
紫东数智OPC社区正式揭牌成立，标志着北京OPC创业生态建设迈入新阶段。社区由中关村数智人工智能产业联盟与紫东太初联合打造，致力于构建集科研创新、项目孵化、创业加速与产业转化于一体的新型生态社区。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">一、孵化空间。</strong>社区首期启用2万平方米孵化空间，覆盖50+创业团队，配备独立办公室、共享工位及会议室，满足OPC企业不同阶段的空间需求。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">二、产学研合作。</strong>联合清华、北航、北理工等高校共建OPC联合实验室，围绕大模型应用、智能体开发、AI行业落地等方向开展联合技术攻关，推动科研成果转化。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">三、品牌活动。</strong>每月举办AI沙龙、项目路演、产业对接等品牌活动，邀请学术界、产业界、投资界嘉宾分享前沿洞见，为OPC创业者搭建高质量交流平台。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
|
||||
<strong style="color:#111827;">四、公共服务。</strong>配套算力、数据、模型"一站式"公共服务平台，提供优惠算力调用、高质量数据集获取、主流大模型API接入等服务，降低OPC企业创新门槛。
|
||||
</p>
|
||||
<p style="color:#374151;font-size:0.875rem;margin-bottom:0;">
|
||||
<strong style="color:#111827;">五、发展目标。</strong>2026年内计划孵化30个标杆性OPC创业项目，培育5家以上估值超亿元的OPC头部企业，形成具有全国影响力的OPC创新高地。
|
||||
</p>
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredActivities() {
|
||||
if (this.activeFilter === 'all') return this.activities
|
||||
return this.activities.filter(item => item.tag === this.activeFilter)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterActivities(key) {
|
||||
this.activeFilter = key
|
||||
},
|
||||
openDetail(item) {
|
||||
this.currentDetail = item
|
||||
this.detailVisible = true
|
||||
},
|
||||
closeDetail() {
|
||||
this.detailVisible = false
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import url('./less/SocietyNewsBrief.less');
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
f/web-kboss/src/views/Ncmatch/images/logo.png
Normal file
BIN
f/web-kboss/src/views/Ncmatch/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
f/web-kboss/src/views/Ncmatch/images/office-space.jpeg
Normal file
BIN
f/web-kboss/src/views/Ncmatch/images/office-space.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 974 KiB |
BIN
f/web-kboss/src/views/Ncmatch/images/opc-community-sign.jpeg
Normal file
BIN
f/web-kboss/src/views/Ncmatch/images/opc-community-sign.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 907 KiB |
BIN
f/web-kboss/src/views/Ncmatch/images/step1-register.jpg
Normal file
BIN
f/web-kboss/src/views/Ncmatch/images/step1-register.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 671 KiB |
BIN
f/web-kboss/src/views/Ncmatch/images/step2-submit.jpg
Normal file
BIN
f/web-kboss/src/views/Ncmatch/images/step2-submit.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 579 KiB |
135
f/web-kboss/src/views/Ncmatch/index.vue
Normal file
135
f/web-kboss/src/views/Ncmatch/index.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- slogan -->
|
||||
<div class="slogan">
|
||||
<div class="title">
|
||||
<span class="gradient-text">数智开物</span>
|
||||
<span class="clip-text">opc公共服务平台</span>
|
||||
<span class="desp">紫东数智OPC社区 × 数智开物OPC公共服务平台，超级个体从这里启航</span>
|
||||
</div>
|
||||
<div class="MetricsDisplay">
|
||||
|
||||
<div class="item">
|
||||
<div class="item-title">
|
||||
3500<span>㎡</span>
|
||||
</div>
|
||||
<div class="item-details">
|
||||
社区建筑面积
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">
|
||||
3500<span>㎡</span>
|
||||
</div>
|
||||
<div class="item-details">
|
||||
社区建筑面积
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">
|
||||
3500<span>㎡</span>
|
||||
</div>
|
||||
<div class="item-details">
|
||||
社区建筑面积
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-title">
|
||||
3500<span>㎡</span>
|
||||
</div>
|
||||
<div class="item-details">
|
||||
社区建筑面积
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 优惠政策 -->
|
||||
<div class="policies">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ComponentName',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 176px 0;
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 62px;
|
||||
|
||||
.gradient-text {
|
||||
font-size: 72px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #3b82f6 70%, #0ea5e9 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.clip-text{
|
||||
font-size: 72px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(to right, rgb(147, 51, 234), rgb(37, 99, 235), rgb(6, 182, 212));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.desp{
|
||||
font-size: 20px;
|
||||
color:rgb(75, 85, 99)
|
||||
}
|
||||
}
|
||||
|
||||
.MetricsDisplay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 80px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.item-title{
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
span{
|
||||
color: #2563EB;
|
||||
}
|
||||
}
|
||||
.item-details{
|
||||
font-size: 14px;
|
||||
color: #6B7280;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
362
f/web-kboss/src/views/Ncmatch/less/OpcJoinDialog.less
Normal file
362
f/web-kboss/src/views/Ncmatch/less/OpcJoinDialog.less
Normal file
@ -0,0 +1,362 @@
|
||||
::v-deep .opc-application-dialog {
|
||||
margin: 0 auto !important;
|
||||
width: 100% !important;
|
||||
max-width: 900px;
|
||||
// max-height: 85vh;
|
||||
border-radius: 16px !important;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dbeafe;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__wrapper {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 32px;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.header-info {
|
||||
.header-title {
|
||||
margin: 0 0 4px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.header-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #f3f4f6;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6b7280;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px 32px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 16px 32px;
|
||||
background: #f9fafb;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
||||
.el-button--primary {
|
||||
background: linear-gradient(135deg, #2563eb, #06b6d4);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0 24px;
|
||||
height: 40px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 0 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
|
||||
.section-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: #dbeafe;
|
||||
color: #2563eb;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
|
||||
.col-span-2 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field-tip {
|
||||
margin: 4px 0 0;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #2563eb;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #eff6ff;
|
||||
border-color: #2563eb;
|
||||
color: #2563eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.file-upload-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border: 1px dashed #2563eb;
|
||||
border-radius: 8px;
|
||||
color: #2563eb;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
transition: all 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.file-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 12px;
|
||||
background: #f9fafb;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: #374151;
|
||||
|
||||
.file-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-remove {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #9ca3af;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
color: #ef4444;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .opc-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
padding-bottom: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.el-form-item__error {
|
||||
position: static;
|
||||
padding-top: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-textarea__inner {
|
||||
border-radius: 8px;
|
||||
border-color: #e5e7eb;
|
||||
background: #f9fafb;
|
||||
font-size: 14px;
|
||||
color: #111827;
|
||||
|
||||
&::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #2563eb;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.el-input {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #2563eb;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-2,
|
||||
.grid-3 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.col-span-2 {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
::v-deep .opc-application-dialog {
|
||||
margin: 16px auto !important;
|
||||
max-height: calc(100vh - 32px);
|
||||
}
|
||||
}
|
||||
540
f/web-kboss/src/views/Ncmatch/less/SocietyNewsBrief.less
Normal file
540
f/web-kboss/src/views/Ncmatch/less/SocietyNewsBrief.less
Normal file
@ -0,0 +1,540 @@
|
||||
.society-news-page {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 56px 0 80px;
|
||||
height: 100%;
|
||||
//height: calc(100vh - 64px);
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 50%, #f8fafc 100%);
|
||||
}
|
||||
|
||||
.news-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.news-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.news-subtitle {
|
||||
margin: 0 auto;
|
||||
max-width: 576px;
|
||||
font-size: 16px;
|
||||
line-height: 1.625;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 8px 20px;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
background: #ffffff;
|
||||
color: #6b7280;
|
||||
border: 1px solid #e5e7eb;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
border-color: #93c5fd;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(135deg, #2563eb, #3b82f6);
|
||||
color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
cursor: pointer;
|
||||
animation: fadeIn 0.4s ease-out both;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.12);
|
||||
|
||||
.activity-title {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
color: #2563eb;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.activity-row {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.activity-date {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.date-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid;
|
||||
background-clip: padding-box;
|
||||
|
||||
.date-day {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.date-month {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.date-block-blue {
|
||||
background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.08));
|
||||
border-color: #bfdbfe;
|
||||
|
||||
.date-day {
|
||||
color: #2563eb;
|
||||
}
|
||||
}
|
||||
|
||||
.date-block-green {
|
||||
background-image: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(20, 184, 166, 0.08));
|
||||
border-color: #a7f3d0;
|
||||
|
||||
.date-day {
|
||||
color: #059669;
|
||||
}
|
||||
}
|
||||
|
||||
.date-block-violet {
|
||||
background-image: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.08));
|
||||
border-color: #ddd6fe;
|
||||
|
||||
.date-day {
|
||||
color: #7c3aed;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.activity-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tag-blue {
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
color: #2563eb;
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.tag-green {
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
color: #059669;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.tag-violet {
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
color: #7c3aed;
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.meta-source {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: #111827;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.activity-desc {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.625;
|
||||
color: #4b5563;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.activity-arrow {
|
||||
flex-shrink: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.activity-arrow {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #93c5fd;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* glass-card 玻璃拟态背景 */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.04);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.news-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.activity-meta {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== Detail Modal ==================== */
|
||||
.detail-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 40px 24px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.detail-panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #dbeafe;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 24px;
|
||||
background: linear-gradient(to bottom, #ffffff 80%, rgba(255,255,255,0.95));
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid #dbeafe;
|
||||
|
||||
.detail-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.detail-tag {
|
||||
display: inline-block;
|
||||
padding: 3px 12px;
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
|
||||
&.tag-blue {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #2563eb;
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
&.tag-green {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #059669;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
&.tag-violet {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
color: #7c3aed;
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.detail-publisher {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
background: #f3f4f6;
|
||||
cursor: pointer;
|
||||
color: #6b7280;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
padding: 24px 32px;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.detail-meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.detail-meta-link {
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #2563eb;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
color: #374151;
|
||||
|
||||
p {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #111827;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-sticky-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 24px;
|
||||
background: linear-gradient(to top, #ffffff 80%, rgba(255,255,255,0.95));
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border-top: 1px solid #dbeafe;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
height: 40px;
|
||||
padding: 0 24px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2563eb, #3b82f6);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-fade-enter-active,
|
||||
.detail-fade-leave-active {
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.detail-fade-enter-active .detail-panel,
|
||||
.detail-fade-leave-active .detail-panel {
|
||||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.detail-fade-enter,
|
||||
.detail-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.detail-fade-enter .detail-panel,
|
||||
.detail-fade-leave-to .detail-panel {
|
||||
transform: translateY(20px) scale(0.96);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.detail-panel {
|
||||
max-width: 100%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.detail-cover {
|
||||
padding: 24px 20px 20px;
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
520
f/web-kboss/src/views/Ncmatch/less/opcOverview.less
Normal file
520
f/web-kboss/src/views/Ncmatch/less/opcOverview.less
Normal file
@ -0,0 +1,520 @@
|
||||
.opc-overview-page {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 50%, #f8fafc 100%);
|
||||
}
|
||||
|
||||
/* 背景装饰球 */
|
||||
.bg-orb {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
|
||||
&.orb-blue {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
&.orb-cyan {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
bottom: 100px;
|
||||
left: -150px;
|
||||
background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 64px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-glow {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
|
||||
&.glow-blue {
|
||||
width: 480px;
|
||||
height: 480px;
|
||||
top: 0;
|
||||
right: 10%;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
}
|
||||
|
||||
&.glow-cyan {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
bottom: 0;
|
||||
left: 5%;
|
||||
background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-text-wrap {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.hero-images {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hero-images {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.image-card {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.08);
|
||||
|
||||
.image-wrapper img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 16px;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 入驻流程 */
|
||||
.process-section {
|
||||
position: relative;
|
||||
padding: 96px 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, 0.03), transparent);
|
||||
}
|
||||
|
||||
.section-glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
position: relative;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.process-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.process-connector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.process-connector {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 97px;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
height: 2px;
|
||||
// background: linear-gradient(to right, rgba(59, 130, 246, 0.3), rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.3));
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.process-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.process-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.process-card {
|
||||
position: relative;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s;
|
||||
animation: fadeInUp 0.6s ease-out both;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 24px;
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.3));
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.5s;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.12);
|
||||
|
||||
.step-badge-01 {
|
||||
background: linear-gradient(135deg, #3b82f6, #06b6d4);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.step-badge-02 {
|
||||
background: linear-gradient(135deg, #06b6d4, #3b82f6);
|
||||
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.step-badge {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
transition: all 0.3s;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
&.step-badge-01 {
|
||||
background: linear-gradient(135deg, #3b82f6, #06b6d4);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.step-badge-02 {
|
||||
background: linear-gradient(135deg, #06b6d4, #3b82f6);
|
||||
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-media {
|
||||
padding: 24px 24px 0;
|
||||
|
||||
.media-inner {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.05));
|
||||
padding: 6px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 208px;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
transition: transform 0.5s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px 24px 28px;
|
||||
}
|
||||
|
||||
.card-icon-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.1));
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #2563eb;
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body > p {
|
||||
margin: 0 0 16px;
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.card-link-row {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.card-link,
|
||||
.card-link-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #06b6d4;
|
||||
}
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta-section {
|
||||
position: relative;
|
||||
padding: 64px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
position: relative;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
margin: 0 0 20px;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.cta-desc {
|
||||
margin: 0 0 32px;
|
||||
font-size: 16px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
display: inline-block;
|
||||
padding: 16px 40px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #3b82f6, #06b6d4);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.hero-images {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.process-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.card-icon-row h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
161
f/web-kboss/src/views/Ncmatch/opcOverview.vue
Normal file
161
f/web-kboss/src/views/Ncmatch/opcOverview.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="opc-overview-page">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="bg-orb orb-blue"></div>
|
||||
<div class="bg-orb orb-cyan"></div>
|
||||
|
||||
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-glow glow-blue"></div>
|
||||
<div class="hero-glow glow-cyan"></div>
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="hero-text-wrap">
|
||||
<h1 class="hero-title">OPC社区概况</h1>
|
||||
<p class="hero-subtitle">紫东数智OPC社区 · 赋能创业人才 · 助力项目落地</p>
|
||||
</div>
|
||||
|
||||
<!-- 园区图片 -->
|
||||
<div class="hero-images">
|
||||
<div class="image-card">
|
||||
<div class="image-wrapper">
|
||||
<img src="./images/opc-community-sign.jpeg" alt="紫东数智OPC社区">
|
||||
</div>
|
||||
<div class="image-overlay">
|
||||
<h3>紫东数智OPC社区</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-card">
|
||||
<div class="image-wrapper">
|
||||
<img src="./images/office-space.jpeg" alt="共享办公空间">
|
||||
</div>
|
||||
<div class="image-overlay">
|
||||
<h3>共享空间</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 入驻流程 -->
|
||||
<section class="process-section">
|
||||
<div class="section-bg"></div>
|
||||
<div class="section-glow"></div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="process-header">
|
||||
<h2 class="section-title">入驻流程</h2>
|
||||
<p class="section-desc">完成入驻申请，开启创业之旅</p>
|
||||
</div>
|
||||
|
||||
<!-- 连接线 -->
|
||||
<div class="process-connector"></div>
|
||||
|
||||
<div class="process-grid">
|
||||
<!-- 步骤1 -->
|
||||
<div class="process-card">
|
||||
<div class="step-badge step-badge-01">
|
||||
<span>01</span>
|
||||
</div>
|
||||
<div class="card-media">
|
||||
<div class="media-inner">
|
||||
<img src="./images/step1-register.jpg" alt="注册登录">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-icon-row">
|
||||
<div class="card-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>注册登录</h3>
|
||||
</div>
|
||||
<p>前往北京市石景山区工商注册平台完成企业注册登录</p>
|
||||
<div class="card-link-row">
|
||||
<a href="https://scjgj.beijing.gov.cn/" target="_blank" class="card-link">
|
||||
<span>访问工商注册平台</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2 -->
|
||||
<div class="process-card">
|
||||
<div class="step-badge step-badge-02">
|
||||
<span>02</span>
|
||||
</div>
|
||||
<div class="card-media">
|
||||
<div class="media-inner">
|
||||
<img src="./images/step2-submit.jpg" alt="入驻申请">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-icon-row">
|
||||
<div class="card-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path 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 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>入驻申请</h3>
|
||||
</div>
|
||||
<p>填写紫东数智OPC社区入驻申请表并提交申请</p>
|
||||
<div class="card-link-row">
|
||||
<button type="button" class="card-link-btn" @click="openFormModal">
|
||||
<span>填写入驻申请表</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 申请入驻 CTA -->
|
||||
<section class="cta-section">
|
||||
<div class="cta-bg"></div>
|
||||
<div class="cta-content">
|
||||
<h2 class="cta-title">申请入驻</h2>
|
||||
<p class="cta-desc">符合入驻标准的创业团队，欢迎申请入驻紫东数智OPC社区</p>
|
||||
<button type="button" class="cta-btn" @click="openFormModal">
|
||||
立即申请入驻
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 入驻申请弹窗 -->
|
||||
<OpcJoinDialog :visible.sync="showFormModal" @close="showFormModal = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OpcJoinDialog from './OpcJoinDialog.vue'
|
||||
|
||||
export default {
|
||||
name: 'OpcOverview',
|
||||
components: { OpcJoinDialog },
|
||||
data() {
|
||||
return {
|
||||
showFormModal: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openFormModal() {
|
||||
this.showFormModal = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import url('./less/opcOverview.less');
|
||||
</style>
|
||||
|
||||
0
f/web-kboss/src/views/Ncmatch/token.vue
Normal file
0
f/web-kboss/src/views/Ncmatch/token.vue
Normal file
209
f/web-kboss/src/views/Ncmatch/topNav.vue
Normal file
209
f/web-kboss/src/views/Ncmatch/topNav.vue
Normal file
@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<header class="ncmatch-header">
|
||||
<nav class="ncmatch-nav">
|
||||
<!-- 左侧Logo -->
|
||||
<a href="javascript:void(0)" class="logo-link" @click="go('/ncmatchHome/index')">
|
||||
<img src="./images/logo.png" alt="OPC数智平台" class="logo-img" />
|
||||
</a>
|
||||
|
||||
<!-- 中间导航 -->
|
||||
<div class="nav-links">
|
||||
<a href="javascript:void(0)" @click="go('/ncmatchHome/index')" class="nav-link"
|
||||
:class="{ active: isActive('/ncmatchHome/index') }">首页
|
||||
</a>
|
||||
<a href="javascript:void(0)" @click="go('/ncmatchHome/societyNews')" class="nav-link"
|
||||
:class="{ active: isActive('/ncmatchHome/societyNews') }">政社快讯
|
||||
</a>
|
||||
<a href="javascript:void(0)" @click="go('/ncmatchHome/tokenMarket')" class="nav-link"
|
||||
:class="{ active: isActive('/ncmatchHome/tokenMarket') }">token市集
|
||||
</a>
|
||||
<a href="javascript:void(0)" @click="go('/ncmatchHome/tokenMarket')" class="nav-link"
|
||||
:class="{ active: isActive('/ncmatchHome/tokenMarket') }">云枢基座
|
||||
</a>
|
||||
<a href="javascript:void(0)" @click="go('/ncmatchHome/supplyAndDemandSquare')" class="nav-link"
|
||||
:class="{ active: isActive('/ncmatchHome/supplyAndDemandSquare') }">供需广场
|
||||
</a>
|
||||
<a href="javascript:void(0)" @click="go('/ncmatchHome/opcOverview')" class="nav-link"
|
||||
:class="{ active: isActive('/ncmatchHome/opcOverview') }">OPC社区概况
|
||||
</a>
|
||||
<!-- 梦工厂 -->
|
||||
<a href="javascript:void(0)" @click="go('/ncmatchHome/tokenMarket')" class="nav-link"
|
||||
:class="{ active: isActive('/ncmatchHome/tokenMarket') }">梦工厂
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 右侧功能按钮 -->
|
||||
<div class="nav-actions">
|
||||
<button class="btn-login" @click="onLogin">登录</button>
|
||||
<div class="dropdown-wrap" id="platform-menu-wrapper">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TopNav',
|
||||
data() {
|
||||
return {
|
||||
logoSrc: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="32"><rect width="120" height="32" fill="%23e5e7eb"/><text x="50%" y="55%" font-size="14" text-anchor="middle" fill="%236b7280" font-family="sans-serif">LOGO</text></svg>',
|
||||
dropdownOpen: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener('click', this.handleOutsideClick);
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('click', this.handleOutsideClick);
|
||||
},
|
||||
methods: {
|
||||
isActive(path) {
|
||||
return this.$route && this.$route.path === path;
|
||||
},
|
||||
go(path) {
|
||||
if (this.$route.path === path) return;
|
||||
this.$router.push(path).catch(() => { });
|
||||
},
|
||||
onLogin() {
|
||||
window.dispatchEvent(new Event('kboss-open-login-dialog'));
|
||||
},
|
||||
handleOutsideClick(e) {
|
||||
const wrap = document.getElementById('platform-menu-wrapper');
|
||||
if (wrap && !wrap.contains(e.target)) {
|
||||
const drop = document.getElementById('platform-dropdown');
|
||||
if (drop) drop.classList.add('hidden');
|
||||
this.dropdownOpen = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ==================== Header ==================== */
|
||||
.ncmatch-header {
|
||||
/* position: fixed; */
|
||||
/* top: 0; */
|
||||
/* left: 0; */
|
||||
/* right: 0; */
|
||||
/* z-index: 50; */
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: saturate(180%) blur(14px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(14px);
|
||||
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* ==================== Nav Layout ==================== */
|
||||
.ncmatch-nav {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* ==================== Logo ==================== */
|
||||
.logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
height: 60px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ==================== Nav Links ==================== */
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
padding: 6px 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
transition: color 0.2s, background-color 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #2563eb;
|
||||
background-color: rgba(37, 99, 235, 0.06);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: #2563eb;
|
||||
font-weight: 600;
|
||||
background-color: rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
/* ==================== Right Actions ==================== */
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
height: 48px;
|
||||
width: 120px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 99px;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
cursor: pointer;
|
||||
font-size: 16px !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-login:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-menu {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: #4b5563;
|
||||
transition: background-color 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-menu:hover {
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
|
||||
/* ==================== Dropdown ==================== */
|
||||
|
||||
|
||||
/* ==================== Hidden Utility ==================== */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user