zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

恢复营销推广页面、增加模板页面

zq-newmaster
zq 1 month ago
parent
4f6499c04f
commit
16a0ce4fa1
13 changed files with 867 additions and 714 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/site/tem-active.svg
  2. BIN
      src/assets/site/temImg.png
  3. 2
      src/components/SetLeftMenu.vue
  4. 16
      src/router/index.js
  5. 12
      src/style/theme/common.scss
  6. 216
      src/views/DemoTable.vue
  7. 125
      src/views/PageTemplete.vue
  8. 2
      src/views/SiteBaseSetting.vue
  9. 23
      src/views/SiteH5.vue
  10. 18
      src/views/SitePersonalization.vue
  11. 517
      src/views/SiteSem copy.vue
  12. 649
      src/views/SiteSem.vue
  13. 2
      src/views/SiteSetting.vue

1
src/assets/site/tem-active.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="28" height="28" viewBox="0 0 28 28"><g><path d="M0,0L28,28L28,4C28,1.79086,26.2091,0,24,0L0,0Z" fill="#006AFF" fill-opacity="1"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 255 B

BIN
src/assets/site/temImg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

2
src/components/SetLeftMenu.vue
View File

@ -186,7 +186,7 @@ export default {
this.handleScroll()
// 重置页面滚动高度
const dom = document.getElementById('main-content')
dom.scrollTop = 0
dom.scrollTop = 0;
this.$router.push(path)
}
},

16
src/router/index.js
View File

@ -90,11 +90,6 @@ const routes = [{
name: '营销推广',
component: () => import( /* webpackChunkName: "siteSem" */ '../views/SiteSem.vue')
},
{
path: 'demoTable', // 默认子路由
name: '测试页面',
redirect: () => import( /* webpackChunkName: "demoTable" */ '../views/DemoTable.vue') // 重定向到第一个页面
},
]
},
{
@ -102,17 +97,6 @@ const routes = [{
name: '网页模板',
component: () => import( /* webpackChunkName: "pageTemplete" */ '../views/PageTemplete.vue')
},
// {
// path: '/demo',
// name: 'demo页面',
// component: () => import( /* webpackChunkName: "Demo" */ '../views/Demo.vue'),
// children: [
// {
// path: '', // 默认子路由
// redirect: () => import( /* webpackChunkName: "DemoTable" */ '../views/DemoTable.vue') // 重定向到第一个页面
// },
// ]
// }
]
const router = new VueRouter({

12
src/style/theme/common.scss
View File

@ -53,10 +53,20 @@ body {
display: none !important;
}
::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
.el-radio__inner {
box-shadow: none !important;
}
.el-tabs__item.is-active {
letter-spacing: 0.08em;
/* main/main_stardard */
color: #006AFF;
font-weight: bold;
}
.el-tabs__nav-wrap::after {
content: none;
}
.addStore {
margin-top: 12px;

216
src/views/DemoTable.vue
View File

@ -0,0 +1,216 @@
<template>
<div class="demo-wrap min-flex-right">
<div class="flex-between">
<h2>站点列表</h2>
<el-form :model="form">
<GuipSelect v-model="form.payword" :defaultValue="form.payword" prop="payword" width="100%"
:options="options_payword" />
</el-form>
</div>
<div class=" flex-common" id="">
<el-form>
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
style="width: 100%" :key="random()">
<el-table-column type="index" label="排序" width="100">
</el-table-column>
<!-- 其他列 -->
<el-table-column prop="name" label="站点简称" width="210">
<template slot-scope="scope">
<a class="name_link flex cell_render" :href="scope.row.link" target="_blank">
{{ scope.row.name }}
<img class="edit_icon" src="@/assets/site/form_link.svg" alt="">
</a>
</template>
</el-table-column>
<el-table-column prop="registerDate" label="注册时间"></el-table-column>
<el-table-column prop="count" label="6月订单数" sortable width="230">
<template slot-scope="scope">
<div class="flex">
{{ scope.row.count }}
<span class="flex"><img class="edit_icon" src="@/assets/site/form_link.svg" alt="">{{
scope.row.percentage }}%上年持平</span>
</div>
</template>
</el-table-column>
<el-table-column prop="price" label="8月订单数" sortable></el-table-column>
<el-table-column prop="phoneService" label="手机服务" :filters="phoneService"
:filter-method="filterHandler">
</el-table-column>
<el-table-column prop="status" label="状态" width="195"></el-table-column>
<!-- <el-table-column fixed="right" label="操作" width="182">
<template slot-scope="scope">
<div class="flex">
<el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button>
<el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button>
</div>
</template>
</el-table-column> -->
</el-table>
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
:total="tableData.length">
</el-pagination>
</el-form>
</div>
</div>
</template>
<script>
// import request from "./utils/request";
import GuipSelect from '@/components/GuipSelect.vue'
export default {
// 站点设置
name: '',
props: [''],
components: {
GuipSelect,
// GuipSelectFilter,
},
data() {
return {
phoneService: [
{
text: '不限',
value: '0'
},
{
text: 'H5',
value: '1'
},
{
text: '小程序',
value: '2'
},
{
text: 'H5以及小程序',
value: '3'
},
],
currentPage: 1, //当前页
pageSize: 2, //每页的容量
total: 0, //列表总数
options_payword: [
{
label: '按篇', value: '0'
},
{
label: '按字符', value: '1'
},
],
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' },
// 更多选项...
],
filteredOptions: this.options,
phoneServicelist:
{
0: '不限',
1: ' H5',
2: '小程序',
3: '无手机服务'
},
tableData: [
{
name: '哈哈哈',
link: 'http://www.chachongz.com',
registerDate: '2025.02.18',
group: '1',
phoneService: '1',
status: '1',//配置中中
price: 10,
count: 23432,
percentage: '2.5'
},
{
name: '知网学诚教育',
link: 'http://new.checkcopy.com',
registerDate: '2025.02.18',
group: '2',
phoneService: '2',
status: '0',//运行中
price: 20,
count: 3432,
percentage: '17.5'
},
{
name: '哈哈哈111',
link: 'http://www.chachongz.com',
registerDate: '2025.02.18',
group: '1',
phoneService: '1',
status: '1',//配置中中
price: 10,
count: 7868,
percentage: '2.5'
},
{
name: '知网学诚教育2222',
link: 'http://new.checkcopy.com',
registerDate: '2025.02.18',
group: '2',
phoneService: '2',
status: '0',//运行中
price: 20,
count: 32432,
percentage: '17.5'
},
],
form: {
payword: '0',
}
}
},
mounted() {
// this.ai2()
// this.$refs.scrollContainer.scrollTo(0)
},
methods: {
// ai2() {
// this.$http('POST', 'https://www.90616.com/ajax_get_ai_services').then(response => {
// console.log(response, '000')
// })
// .catch(error => {
// console.error(error, '22-----')
// })
// },
// 列筛选
filterHandler(value, row, column) {
const property = column['property'];
if (value == 0) {
return row[property] != value
}
return row[property] === value;
},
// 自定义搜索筛选
customFilter(keyword, options) {
if (!keyword) return options
return options.filter(item => {
// 自定义筛选逻辑
return item.label.includes(keyword) || item.value.includes(keyword)
})
},
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
},
random() {
var randomNumber = Math.random();
return randomNumber
},
}
}
</script>
<style scoped lang="scss">
.demo-wrap {
width: 100%;
letter-spacing: 0.08em;
}
</style>

125
src/views/PageTemplete.vue
View File

@ -0,0 +1,125 @@
<template>
<div class="pageTemplete-wrap min-flex">
<div class=" flex-common" id="">
<h3>模板选择</h3>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="混合（AI+查重）" name="1">
<div class="templeteImgs">
<div class="templeteImgs-item" v-for="item in templeteList" :key="item.tpl_id">
<img :src="item.img" alt="">
<span class="look">预览</span>
<img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
<p>{{ item.list }}</p>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="仅查重" name="2">
<div class="templeteImgs">
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 1})" :key="item.tpl_id">
<img :src="require(item.img)" alt="">
<span class="look">预览</span>
<img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
<p>{{ item.list }}</p>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="仅AI写作" name="3"></el-tab-pane>
<div class="templeteImgs">
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 0})" :key="item.tpl_id">
<img :src="require(item.img)" alt="">
<span class="look">预览</span>
<img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
<p>{{ item.list }}</p>
</div>
</div>
</el-tabs>
</div>
</div>
</template>
<script>
export default {
// 站点设置
name: '',
components: {
// GuipInput,
// GuipButton,
// GuipSwitch,
// GroupFormBtns
},
data() {
return {
activeName: '1',
addImgList: {
'万方': require('@/assets/register/wanfang.png'),
'维普': require('@/assets/register/weipu.svg'),
'学术不端': require('@/assets/register/xueshubuduan.svg'),
},
templeteList:[
{
name:'清新科技蓝',
type:1,
tpl_id:'1',
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝1',
type:0,
tpl_id:'11',
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝2',
tpl_id:'12',
type:0,
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝3',
tpl_id:'16',
type:0,
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝4',
tpl_id:'13',
type:1,
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝5',
tpl_id:'14',
type:1,
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝6',
type:1,
tpl_id:'15',
img:require('@/assets/site/temImg.png')
},
]
}
},
methods: {
handleClick() {
}
}
}
</script>
<style scoped lang="scss">
.pageTemplete-wrap {
width: 100%;
letter-spacing: 0.08em;
padding: 12px;
// overflow-y: auto;
box-sizing: border-box;
}
::v-deep .el-tabs__nav-wrap {
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #DFE2E6;
}
</style>

2
src/views/SiteBaseSetting.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="site-setting-wrap min-flex-rigth">
<div class="site-setting-wrap min-flex-right">
<div class="siteMessage flex-common" id="siteMessage1">
<h3>站点信息</h3>
<el-form :model="siteForm" :rules="siteFormrules" ref="siteForm">

23
src/views/SiteH5.vue
View File

@ -6,3 +6,26 @@
</div>
</div>
</template>
<script>
// import request from "./utils/request";
import { mapState } from 'vuex';
import store from '../store';
export default {
name: 'Sidebar',
props: {},
data() {
return {
}
},
mounted() {
store.commit('SET_PAGETITLE', '移动端设置');
},
computed: {
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
methods:{
}
}
</script>

18
src/views/SitePersonalization.vue
View File

@ -318,16 +318,16 @@ export default {
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__item.is-active {
letter-spacing: 0.08em;
/* main/main_stardard */
color: #006AFF;
font-weight: bold;
}
// ::v-deep .el-tabs__item.is-active {
// letter-spacing: 0.08em;
// /* main/main_stardard */
// color: #006AFF;
// font-weight: bold;
// }
::v-deep .el-tabs__nav-wrap::after {
content: none;
}
// ::v-deep .el-tabs__nav-wrap::after {
// content: none;
// }
::v-deep .el-tabs__header {
margin-bottom: 0;

517
src/views/SiteSem copy.vue
View File

@ -1,517 +0,0 @@
<template>
<div class="site-sem-wrap min-flex-right">
<div class="siteMessage flex-common" id="siteMessage11">
<h3>搜索引擎优化（SEO） <span>通过SEO设置，可以免费获得流量、提高网站在搜索引擎中的排名</span></h3>
<el-form ref="formRef" :model="semForm1">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="站点标题（T：title）">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
v-model="semForm1.title" placeholder="建议80字内">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="站点关键词（K：keyword）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea"
v-model="semForm1.keyWord">
</GuipInput>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="站点描述（D：description）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
v-model="semForm1.desc">
</GuipInput>
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm1')" />
</div>
<div class="siteMessage flex-common mt12" id="siteMessage12">
<h3>搜索引擎竞价（SEM） <span>通过SEM设置，获得流量、提高网站在搜索引擎中的排名</span></h3>
<el-form ref="baiduRef" class="bidform" :model="semFormbid1" v-if="bidList.includes('baidu')">
<div class="semBidWrap">
<h3 class="flex-between">
<p>百度OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
<div class="flex close-bid point" @click="deleteBid('baidu')">删除<img
src="@/assets/register/close.svg" alt=""></div>
</h3>
<div class="baidu-wrap bidWrap">
<div class="bidwrap-item">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
<div class="top-right column">
<b>输入Token</b>
<p>百度创建转化追踪：转化类型选择“服务购买成功”，接入方式选择“线索API”，复制token，填入下方输入框。<img
src="@/assets/site/form_qua_ic.svg" alt=""> 指南 </p>
</div>
</div>
<div class="bidwrap-item-bot flex">
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid1.token"
placeholder="请输入token" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" @click="semFormConmit('baidu','token')">确认</GuipButton>
</div>
</div>
<div class="bidwrap-item">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
<div class="top-right column">
<b>联调创建OCPC</b>
<p>创建转化追踪后：点击该条记录的“联调”，复制带有bd-vid的推广url，复制到下方输入框，点击按钮开始联调。<img
src="@/assets/site/form_qua_ic.svg" alt=""> 指南 </p>
</div>
</div>
<div class="bidwrap-item-bot flex">
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid1.url"
placeholder="请输入url" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" @click="semFormConmit('baidu','url')">开始联调
</GuipButton>
</div>
</div>
</div>
</div>
</el-form>
<el-form class="bidform" ref="360Ref" :model="semFormbid2" v-if="bidList.includes('360')">
<div class="semBidWrap">
<h3 class="flex-between">
<p>360OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
<div class="flex close-bid point" @click="deleteBid('360')">删除<img
src="@/assets/register/close.svg" alt=""></div>
</h3>
<div class="baidu-wrap bidWrap">
<div class="beforeNotice">
<h4> <img src="@/assets/site/info_filled.svg" alt=""> 前期准备事项</h4>
<p class="mt12 flex">1. <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台</p>
<p class="mt10 flex">2. <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg"
alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。</p>
</div>
<div class="bidwrap-item">
<div class="biditem360 mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
<b>AppKey</b>
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid2.appKey"
placeholder="请输入" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="semFormConmit('360','appKey')">确认</GuipButton>
</div>
<div class="biditem360 mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
<b>AppSecret</b>
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid2.appSecret"
placeholder="请输入" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="semFormConmit('360','appSecret')">确认</GuipButton>
</div>
</div>
</div>
</div>
</el-form>
<el-form ref="formRef" class="bidform tcpr-wrap" :model="semFormbid3" v-if="bidList.includes('mast')">
<div class="semBidWrap">
<h3 class="flex-between">
<p>必应TCPA竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
<div class="flex close-bid point" @click="deleteBid('360')">删除<img
src="@/assets/register/close.svg" alt=""></div>
</h3>
<div class="baidu-wrap bidWrap">
<div class="beforeNotice">
<h4> <img src="@/assets/site/info_filled.svg" alt=""> 前期准备事项</h4>
<p class="mt12 flex"><i>1.</i> <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>（Azure），登录后填写个人资料并完成注册。
</p>
<p class="mt10 flex"><i>2.</i> <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg"
alt="">前往应用注册</a>，侧边栏点击“应用注册”，然后在右侧应用列表中注册应用程序</p>
<div>
<p>名称：填写应用名称</p>
<p>受支持的帐户类型：选择 任何组织目录(任何 Microsoft Entra ID 租户 - 多租户)中的帐户和个人 Microsoft 帐户(例如 Skype、Xbox)</p>
<p>重定向URI：忽略</p>
<p>点击：注册</p>
</div>
<p class="mt10"><i>3.</i> <span>应用配置，返回应用列表，在应用列表点击刚创建的应用，然后在应用概览页点击“添加重定向URI”->点击添加平台，选择移动和桌面应用程序->自定义重定向 URI，
<b>https://www.kuailelunwen.com/callback/microsoft_callback <img class="point" src="@/assets/site/form_copy.svg" alt=""></b></span>
</p>
</div>
<div class="bidwrap-item">
<div class="biditemMast mb24 flex-between">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
<div class="top-right column">
<b>配置应用信息</b>
<p>在微软云平台，获得应用程序(客户端) ID。并联系开户人员，获得开发者令牌Developer token </p>
</div>
</div>
<div class="flex">
<span class="yesSet">已设置</span>
<GuipButton type="normal" :btnstyle="{ width: '94px', height: '38px' }"
@click="manageDialog('configAppInfo')">管理设置</GuipButton>
</div>
</div>
<div class="biditemMast mb24 flex-between">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
<div class="top-right column">
<b>配置离线转化信息</b>
<p class="flex"><a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>，左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid的值</p>
</div>
</div>
<div class="flex">
<span class="notSet">已设置</span>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="manageDialog('configOffline')">立即设置</GuipButton>
</div>
</div>
<div class="biditemMast mb24 flex-between">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_3.png" alt="">
<div class="top-right column">
<b>创建离线转化</b>
<p>在微软云平台创建离线转化，创建成功后2个小时才生效，转化数据查看最晚有5-6小时延迟。 </p>
</div>
</div>
<div class="flex">
<span class="notSet">已设置</span>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="manageDialog('createOffline')">立即设置</GuipButton>
</div>
</div>
</div>
</div>
</div>
</el-form>
<div class="addStore flex" @click="addBid">
<img src="@/assets/addIcon.svg" alt="">增加搜索竞价
</div>
</div>
<div class="siteMessage flex-common mt12" id="siteMessage13">
<h3>访问统计 <span>输入统计代码，便于统计浏览点击量(可以不填)</span></h3>
<el-form ref="formRef" :model="semForm3">
<GuipInput ref="GuipInput" width="100%" height="160px" type="textarea" v-model="semForm3.code">
</GuipInput>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm3')" />
</div>
<GuipDialog type="normal" width="457px" :dialogVisible="dialogVisibleBid" title="增加搜索竞价" :show-close-button="false"
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirm" @cancel="handleCancel"
@dialogVisibleChange="dialogVisibleChange">
<el-radio-group v-model="bidAddRadio" class=" mt12 column" @input="radioChange">
<!-- <div style="margin-top: 16px;" class="column radio-wrap"> -->
<el-radio class="mb24" v-for="key in Object.keys(bidAddList)" :disabled="bidList.includes(key)"
:key="key" :label="key">{{
bidAddList[key] }}{{ bidList.includes(key) ? '（已添加）' : '' }}</el-radio>
<!-- </div> -->
</el-radio-group>
</GuipDialog>
<GuipDialog type="normal" :dialogVisible="dialogVisibleConfig" :title="diaTitle" :show-close-button="false"
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirmConfig" @cancel="handleCancelConfig"
@dialogVisibleChange="dialogVisibleChange">
<ConfigOffLineConversion v-if="configType == 'configOffline'"/>
<ConfigAppInformation v-if="configType == 'configAppInfo'"/>
<CreateOffLine v-if="configType == 'createOffline'"/>
</GuipDialog>
</div>
</template>
<script>
import GuipInput from '@/components/GuipInput.vue';
import { mapState } from 'vuex';
import store from '../store';
// import GuipButton from '@/components/GuipButton.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipButton from '@/components/GuipButton.vue';
import ConfigOffLineConversion from '@/components/site/ConfigOffLineConversion.vue';
import ConfigAppInformation from '@/components/site/ConfigAppInformation.vue';
import CreateOffLine from '@/components/site/CreateOffLine.vue';
export default {
// 站点设置
name: '',
props: [''],
components: {
CreateOffLine,
ConfigAppInformation,
ConfigOffLineConversion,
GuipInput,
GuipFormItem,
GuipButton,
GroupFormBtns,
GuipDialog
},
data() {
return {
configType:'configAppInfo',
diaTitle:'配置应用信息',
bidList: ['baidu', '360', 'mast'],
bidAddRadio: '',
bidAddList: {
'baidu': '百度OCPC竞价',
'360': '360OCPC竞价',
'mast': '必应TCPA竞价',
},
configTitle:{
createOffline:'创建离线转化',
configOffline:'配置离线转化信息',
configAppInfo:'配置应用信息',
},
dialogVisibleBid: false,
dialogVisibleConfig: false,
semForm1: {
title: '',
keyWord: '',
desc: ''
},
semForm2: {
title: '',
keyWord: '',
desc: ''
},
semForm3: {
code: '',
},
semFormbid1: {
token: '',
url: ''
},
semFormbid2: {
appKey: '',
appSecret: ''
},
semFormbid3: {
}
}
},
computed: {
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
mounted() {
store.commit('SET_PAGETITLE', '营销推广');
},
methods: {
addBid() {
this.dialogVisibleBid = true;
},
semFormConmit(type,key) {
console.log(key, 'key---');
},
radioChange(data) {
console.log(data, 'radio--data');
},
cancelClick() {
console.log('quxiao');
},
confirmClick(type) {
console.log(type, '确认');
},
// 确认按钮事件
handleConfirm() {
this.$message.success('点击了确认按钮');
this.dialogVisibleBid = false;
},
// 取消按钮事件
handleCancel() {
this.$message.warning('点击了取消按钮');
this.dialogVisibleBid = false;
},
manageDialog(type){
this.configType = type;
this.dialogVisibleConfig = true;
this.diaTitle = this.configTitle[type]
},
// 确认按钮事件
handleConfirmConfig() {
this.$message.success('点击了确认按钮');
this.dialogVisibleConfig = false;
},
// 取消按钮事件
handleCancelConfig() {
this.$message.warning('点击了取消按钮');
this.dialogVisibleConfig = false;
},
dialogVisibleChange(data) {
console.log(data, 'data098908090');
},
deleteBid(type) {
let index = this.bidList.indexOf(type)
this.bidList.splice(index, index + 1)
}
}
}
</script>
<style scoped lang="scss">
.site-sem-wrap {
width: 100%;
letter-spacing: 0.08em;
}
.notSet,.yesSet {
margin-right: 12px;
color: #FF4D4F;
}
.yesSet {
color: #00C261;
}
.bidform {
&:nth-child(even) {
margin: 32px 0;
}
}
.beforeNotice {
h4 {
margin: 0;
}
margin-bottom: 18px;
text-align: left;
box-sizing: border-box;
padding: 20px 14px;
border-radius: 4px;
/* middle/middle_blue_1 */
background: #F2F7FF;
/* middle/middle_blue_3 */
border: 1px solid #BFDAFF;
div {
margin-top: 2px;
padding-left: 23px;
p{
color: #8A9099;
}
}
p{
color: #1E2226;
i{
font-style: normal;
}
&:last-child{
display: flex;
align-items: stretch;
b{
font-weight: normal;
color: #8A9099;
display: inline-flex;
img{
margin-left: 4px;
}
}
}
}
a {
text-decoration: none;
color: #006AFF;
margin-right: 10px;
img {
margin-left: 12px;
}
}
}
.biditem360 {
b {
display: inline-block;
width: 80px;
text-align: left;
margin-right: 10px;
}
}
.addStore {
margin-top: 24px;
}
.radio-wrap {}
.tcpr-wrap .bidwrap-item{
padding: 0;
background: transparent;
.biditemMast{
background: #fff;
padding: 24px 16px;
}
}
.semBidWrap {
background: #FAFAFA;
padding: 18px 14px;
box-sizing: border-box;
.el-form-item {
margin-bottom: 0;
}
.close-bid {
color: #626573;
font-size: 14px;
font-weight: normal;
img {
width: 16px;
height: 16px;
margin-left: 6px;
}
}
.bidWrap {
.bidwrap-item {
padding: 24px 16px;
box-sizing: border-box;
border-radius: 8px;
background: #FFFFFF;
.bid-item-img {
width: 32px;
height: 32px;
margin-right: 22px;
}
.bidwrap-item-top {
.top-right {
p {
margin-top: 10px;
}
a{
text-decoration: none;
color: #006AFF;
img{
margin-right: 10px;
}
}
}
}
.bidwrap-item-bot {
padding-left: 54px;
justify-content: flex-end;
}
}
}
}
</style>

649
src/views/SiteSem.vue
View File

@ -1,206 +1,517 @@
<template>
<div class="demo-wrap min-flex-right">
<div class="flex-between">
<h2>站点列表</h2>
<el-form :model="form">
<GuipSelect v-model="form.payword" :defaultValue="form.payword" prop="payword" width="100%"
:options="options_payword" />
<div class="site-sem-wrap min-flex-right">
<div class="siteMessage flex-common" id="siteMessage11">
<h3>搜索引擎优化（SEO） <span>通过SEO设置，可以免费获得流量、提高网站在搜索引擎中的排名</span></h3>
<el-form ref="formRef" :model="semForm1">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="站点标题（T：title）">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
v-model="semForm1.title" placeholder="建议80字内">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="站点关键词（K：keyword）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea"
v-model="semForm1.keyWord">
</GuipInput>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="站点描述（D：description）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
v-model="semForm1.desc">
</GuipInput>
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm1')" />
</div>
<div class="siteMessage flex-common mt12" id="siteMessage12">
<h3>搜索引擎竞价（SEM） <span>通过SEM设置，获得流量、提高网站在搜索引擎中的排名</span></h3>
<el-form ref="baiduRef" class="bidform" :model="semFormbid1" v-if="bidList.includes('baidu')">
<div class="semBidWrap">
<h3 class="flex-between">
<p>百度OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
<div class="flex close-bid point" @click="deleteBid('baidu')">删除<img
src="@/assets/register/close.svg" alt=""></div>
</h3>
<div class="baidu-wrap bidWrap">
<div class="bidwrap-item">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
<div class="top-right column">
<b>输入Token</b>
<p>百度创建转化追踪：转化类型选择“服务购买成功”，接入方式选择“线索API”，复制token，填入下方输入框。<img
src="@/assets/site/form_qua_ic.svg" alt=""> 指南 </p>
</div>
</div>
<div class="bidwrap-item-bot flex">
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid1.token"
placeholder="请输入token" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" @click="semFormConmit('baidu','token')">确认</GuipButton>
</div>
</div>
<div class="bidwrap-item">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
<div class="top-right column">
<b>联调创建OCPC</b>
<p>创建转化追踪后：点击该条记录的“联调”，复制带有bd-vid的推广url，复制到下方输入框，点击按钮开始联调。<img
src="@/assets/site/form_qua_ic.svg" alt=""> 指南 </p>
</div>
</div>
<div class="bidwrap-item-bot flex">
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid1.url"
placeholder="请输入url" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" @click="semFormConmit('baidu','url')">开始联调
</GuipButton>
</div>
</div>
</div>
</div>
</el-form>
<el-form class="bidform" ref="360Ref" :model="semFormbid2" v-if="bidList.includes('360')">
<div class="semBidWrap">
<h3 class="flex-between">
<p>360OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
<div class="flex close-bid point" @click="deleteBid('360')">删除<img
src="@/assets/register/close.svg" alt=""></div>
</h3>
<div class="baidu-wrap bidWrap">
<div class="beforeNotice">
<h4> <img src="@/assets/site/info_filled.svg" alt=""> 前期准备事项</h4>
<p class="mt12 flex">1. <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台</p>
<p class="mt10 flex">2. <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg"
alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。</p>
</div>
<div class="bidwrap-item">
<div class="biditem360 mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
<b>AppKey</b>
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid2.appKey"
placeholder="请输入" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="semFormConmit('360','appKey')">确认</GuipButton>
</div>
<div class="biditem360 mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
<b>AppSecret</b>
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid2.appSecret"
placeholder="请输入" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="semFormConmit('360','appSecret')">确认</GuipButton>
</div>
</div>
</div>
</div>
</el-form>
<el-form ref="formRef" class="bidform tcpr-wrap" :model="semFormbid3" v-if="bidList.includes('mast')">
<div class="semBidWrap">
<h3 class="flex-between">
<p>必应TCPA竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
<div class="flex close-bid point" @click="deleteBid('360')">删除<img
src="@/assets/register/close.svg" alt=""></div>
</h3>
<div class="baidu-wrap bidWrap">
<div class="beforeNotice">
<h4> <img src="@/assets/site/info_filled.svg" alt=""> 前期准备事项</h4>
<p class="mt12 flex"><i>1.</i> <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>（Azure），登录后填写个人资料并完成注册。
</p>
<p class="mt10 flex"><i>2.</i> <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg"
alt="">前往应用注册</a>，侧边栏点击“应用注册”，然后在右侧应用列表中注册应用程序</p>
<div>
<p>名称：填写应用名称</p>
<p>受支持的帐户类型：选择 任何组织目录(任何 Microsoft Entra ID 租户 - 多租户)中的帐户和个人 Microsoft 帐户(例如 Skype、Xbox)</p>
<p>重定向URI：忽略</p>
<p>点击：注册</p>
</div>
<p class="mt10"><i>3.</i> <span>应用配置，返回应用列表，在应用列表点击刚创建的应用，然后在应用概览页点击“添加重定向URI”->点击添加平台，选择移动和桌面应用程序->自定义重定向 URI，
<b>https://www.kuailelunwen.com/callback/microsoft_callback <img class="point" src="@/assets/site/form_copy.svg" alt=""></b></span>
</p>
</div>
<div class="bidwrap-item">
<div class="biditemMast mb24 flex-between">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
<div class="top-right column">
<b>配置应用信息</b>
<p>在微软云平台，获得应用程序(客户端) ID。并联系开户人员，获得开发者令牌Developer token </p>
</div>
</div>
<div class=" flex-common" id="">
<el-form>
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
style="width: 100%" :key="random()">
<el-table-column type="index" label="排序" width="100">
</el-table-column>
<!-- 其他列 -->
<el-table-column prop="name" label="站点简称" width="210">
<template slot-scope="scope">
<a class="name_link flex cell_render" :href="scope.row.link" target="_blank">
{{ scope.row.name }}
<img class="edit_icon" src="@/assets/site/form_link.svg" alt="">
</a>
</template>
</el-table-column>
<el-table-column prop="registerDate" label="注册时间"></el-table-column>
<el-table-column prop="count" label="6月订单数" sortable width="230">
<template slot-scope="scope">
<div class="flex">
{{ scope.row.count }}
<span class="flex"><img class="edit_icon" src="@/assets/site/form_link.svg" alt="">{{
scope.row.percentage }}%上年持平</span>
</div>
</template>
</el-table-column>
<el-table-column prop="price" label="8月订单数" sortable></el-table-column>
<el-table-column prop="phoneService" label="手机服务" :filters="phoneService"
:filter-method="filterHandler">
</el-table-column>
<el-table-column prop="status" label="状态" width="195"></el-table-column>
<!-- <el-table-column fixed="right" label="操作" width="182">
<template slot-scope="scope">
<span class="yesSet">已设置</span>
<GuipButton type="normal" :btnstyle="{ width: '94px', height: '38px' }"
@click="manageDialog('configAppInfo')">管理设置</GuipButton>
</div>
</div>
<div class="biditemMast mb24 flex-between">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
<div class="top-right column">
<b>配置离线转化信息</b>
<p class="flex"><a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>，左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid的值</p>
</div>
</div>
<div class="flex">
<span class="notSet">已设置</span>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="manageDialog('configOffline')">立即设置</GuipButton>
</div>
</div>
<div class="biditemMast mb24 flex-between">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_3.png" alt="">
<div class="top-right column">
<b>创建离线转化</b>
<p>在微软云平台创建离线转化，创建成功后2个小时才生效，转化数据查看最晚有5-6小时延迟。 </p>
</div>
</div>
<div class="flex">
<el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button>
<el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button>
</div>
</template>
</el-table-column> -->
</el-table>
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
:total="tableData.length">
</el-pagination>
<span class="notSet">已设置</span>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="manageDialog('createOffline')">立即设置</GuipButton>
</div>
</div>
</div>
</div>
</div>
</el-form>
<div class="addStore flex" @click="addBid">
<img src="@/assets/addIcon.svg" alt="">增加搜索竞价
</div>
</div>
<div class="siteMessage flex-common mt12" id="siteMessage13">
<h3>访问统计 <span>输入统计代码，便于统计浏览点击量(可以不填)</span></h3>
<el-form ref="formRef" :model="semForm3">
<GuipInput ref="GuipInput" width="100%" height="160px" type="textarea" v-model="semForm3.code">
</GuipInput>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm3')" />
</div>
<GuipDialog type="normal" width="457px" :dialogVisible="dialogVisibleBid" title="增加搜索竞价" :show-close-button="false"
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirm" @cancel="handleCancel"
@dialogVisibleChange="dialogVisibleChange">
<el-radio-group v-model="bidAddRadio" class=" mt12 column" @input="radioChange">
<!-- <div style="margin-top: 16px;" class="column radio-wrap"> -->
<el-radio class="mb24" v-for="key in Object.keys(bidAddList)" :disabled="bidList.includes(key)"
:key="key" :label="key">{{
bidAddList[key] }}{{ bidList.includes(key) ? '（已添加）' : '' }}</el-radio>
<!-- </div> -->
</el-radio-group>
</GuipDialog>
<GuipDialog type="normal" :dialogVisible="dialogVisibleConfig" :title="diaTitle" :show-close-button="false"
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirmConfig" @cancel="handleCancelConfig"
@dialogVisibleChange="dialogVisibleChange">
<ConfigOffLineConversion v-if="configType == 'configOffline'"/>
<ConfigAppInformation v-if="configType == 'configAppInfo'"/>
<CreateOffLine v-if="configType == 'createOffline'"/>
</GuipDialog>
</div>
</template>
<script>
import GuipSelect from '@/components/GuipSelect.vue'
import GuipInput from '@/components/GuipInput.vue';
import { mapState } from 'vuex';
import store from '../store';
// import GuipButton from '@/components/GuipButton.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipButton from '@/components/GuipButton.vue';
import ConfigOffLineConversion from '@/components/site/ConfigOffLineConversion.vue';
import ConfigAppInformation from '@/components/site/ConfigAppInformation.vue';
import CreateOffLine from '@/components/site/CreateOffLine.vue';
export default {
// 站点设置
name: '',
props: [''],
components: {
GuipSelect,
// GuipSelectFilter,
CreateOffLine,
ConfigAppInformation,
ConfigOffLineConversion,
GuipInput,
GuipFormItem,
GuipButton,
GroupFormBtns,
GuipDialog
},
data() {
return {
phoneService: [
{
text: '不限',
value: '0'
},
{
text: 'H5',
value: '1'
},
{
text: '小程序',
value: '2'
},
{
text: 'H5以及小程序',
value: '3'
},
],
currentPage: 1, //当前页
pageSize: 2, //每页的容量
total: 0, //列表总数
options_payword: [
{
label: '按篇', value: '0'
},
{
label: '按字符', value: '1'
},
],
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' },
// 更多选项...
],
filteredOptions: this.options,
phoneServicelist:
{
0: '不限',
1: ' H5',
2: '小程序',
3: '无手机服务'
},
tableData: [
{
name: '哈哈哈',
link: 'http://www.chachongz.com',
registerDate: '2025.02.18',
group: '1',
phoneService: '1',
status: '1',//配置中中
price: 10,
count: 23432,
percentage: '2.5'
},
{
name: '知网学诚教育',
link: 'http://new.checkcopy.com',
registerDate: '2025.02.18',
group: '2',
phoneService: '2',
status: '0',//运行中
price: 20,
count: 3432,
percentage: '17.5'
},
{
name: '哈哈哈111',
link: 'http://www.chachongz.com',
registerDate: '2025.02.18',
group: '1',
phoneService: '1',
status: '1',//配置中中
price: 10,
count: 7868,
percentage: '2.5'
},
{
name: '知网学诚教育2222',
link: 'http://new.checkcopy.com',
registerDate: '2025.02.18',
group: '2',
phoneService: '2',
status: '0',//运行中
price: 20,
count: 32432,
percentage: '17.5'
},
],
form: {
payword: '0',
configType:'configAppInfo',
diaTitle:'配置应用信息',
bidList: ['baidu', '360', 'mast'],
bidAddRadio: '',
bidAddList: {
'baidu': '百度OCPC竞价',
'360': '360OCPC竞价',
'mast': '必应TCPA竞价',
},
configTitle:{
createOffline:'创建离线转化',
configOffline:'配置离线转化信息',
configAppInfo:'配置应用信息',
},
dialogVisibleBid: false,
dialogVisibleConfig: false,
semForm1: {
title: '',
keyWord: '',
desc: ''
},
semForm2: {
title: '',
keyWord: '',
desc: ''
},
semForm3: {
code: '',
},
semFormbid1: {
token: '',
url: ''
},
semFormbid2: {
appKey: '',
appSecret: ''
},
semFormbid3: {
}
}
},
computed: {
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
mounted() {
// this.$refs.scrollContainer.scrollTo(0)
store.commit('SET_PAGETITLE', '营销推广');
},
methods: {
// 列筛选
filterHandler(value, row, column) {
// console.log(value, row, column,'======');
const property = column['property'];
if (value == 0) {
return row[property] != value
}
return row[property] === value;
addBid() {
this.dialogVisibleBid = true;
},
// 自定义搜索筛选
customFilter(keyword, options) {
if (!keyword) return options
return options.filter(item => {
// 自定义筛选逻辑
return item.label.includes(keyword) || item.value.includes(keyword)
})
semFormConmit(type,key) {
console.log(key, 'key---');
},
handleSizeChange(val) {
this.pageSize = val
radioChange(data) {
console.log(data, 'radio--data');
},
handleCurrentChange(val) {
this.currentPage = val
cancelClick() {
console.log('quxiao');
},
random() {
var randomNumber = Math.random();
return randomNumber
confirmClick(type) {
console.log(type, '确认');
},
// 确认按钮事件
handleConfirm() {
this.$message.success('点击了确认按钮');
this.dialogVisibleBid = false;
},
// 取消按钮事件
handleCancel() {
this.$message.warning('点击了取消按钮');
this.dialogVisibleBid = false;
},
manageDialog(type){
this.configType = type;
this.dialogVisibleConfig = true;
this.diaTitle = this.configTitle[type]
},
// 确认按钮事件
handleConfirmConfig() {
this.$message.success('点击了确认按钮');
this.dialogVisibleConfig = false;
},
// 取消按钮事件
handleCancelConfig() {
this.$message.warning('点击了取消按钮');
this.dialogVisibleConfig = false;
},
dialogVisibleChange(data) {
console.log(data, 'data098908090');
},
deleteBid(type) {
let index = this.bidList.indexOf(type)
this.bidList.splice(index, index + 1)
}
}
}
</script>
<style scoped lang="scss">
.demo-wrap {
.site-sem-wrap {
width: 100%;
letter-spacing: 0.08em;
}
.notSet,.yesSet {
margin-right: 12px;
color: #FF4D4F;
}
.yesSet {
color: #00C261;
}
.bidform {
&:nth-child(even) {
margin: 32px 0;
}
}
.beforeNotice {
h4 {
margin: 0;
}
margin-bottom: 18px;
text-align: left;
box-sizing: border-box;
padding: 20px 14px;
border-radius: 4px;
/* middle/middle_blue_1 */
background: #F2F7FF;
/* middle/middle_blue_3 */
border: 1px solid #BFDAFF;
div {
margin-top: 2px;
padding-left: 23px;
p{
color: #8A9099;
}
}
p{
color: #1E2226;
i{
font-style: normal;
}
&:last-child{
display: flex;
align-items: stretch;
b{
font-weight: normal;
color: #8A9099;
display: inline-flex;
img{
margin-left: 4px;
}
}
}
}
a {
text-decoration: none;
color: #006AFF;
margin-right: 10px;
img {
margin-left: 12px;
}
}
}
.biditem360 {
b {
display: inline-block;
width: 80px;
text-align: left;
margin-right: 10px;
}
}
.addStore {
margin-top: 24px;
}
.radio-wrap {}
.tcpr-wrap .bidwrap-item{
padding: 0;
background: transparent;
.biditemMast{
background: #fff;
padding: 24px 16px;
}
}
.semBidWrap {
background: #FAFAFA;
padding: 18px 14px;
box-sizing: border-box;
.el-form-item {
margin-bottom: 0;
}
.close-bid {
color: #626573;
font-size: 14px;
font-weight: normal;
img {
width: 16px;
height: 16px;
margin-left: 6px;
}
}
.bidWrap {
.bidwrap-item {
padding: 24px 16px;
box-sizing: border-box;
border-radius: 8px;
background: #FFFFFF;
.bid-item-img {
width: 32px;
height: 32px;
margin-right: 22px;
}
.bidwrap-item-top {
.top-right {
p {
margin-top: 10px;
}
a{
text-decoration: none;
color: #006AFF;
img{
margin-right: 10px;
}
}
}
}
.bidwrap-item-bot {
padding-left: 54px;
justify-content: flex-end;
}
}
}
}
</style>

2
src/views/SiteSetting.vue
View File

@ -3,7 +3,7 @@
<SetLeftMenu />
<!--:menuList="menuList" :activeFloor="activeFloor" :curIndex="curIndex" -->
<!-- 主内容区域 -->
<main class="main-content" ref="scrollContainer">
<main class="main-content" ref="scrollContainer" id="main-content">
<!-- 面包屑 位置 -->
<PageTitle v-if="path !='/siteSetting/siteSem'" className="min-flex-right"/>

Write Preview
Loading…
Cancel
Save