hz/ylst-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:样式优化

Browse Source
This commit is contained in:
du.meimei
2025-03-25 10:57:20 +08:00
parent e2b0030b08
commit 9447d38247
6 changed files with 76 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/Publish/accurate/AccurateAdd.vue
View File

@@ -61,4 +61,7 @@ const selectChannel = (val) => {
right: 10px;
color: #bfbfbf;
}
.ope{
margin-left: 80px;
}
</style>

40
src/views/Publish/accurate/AccurateDetail.vue
View File

@@ -8,26 +8,27 @@
:closable="false"
headerStyle="border:none;border-radius:12px;font-weight:bold"
>
<a-spin :spinning="loading">
<div class="detail-content">
<img :src="setImg" alt=""/>
<a-form :model="detail" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item label="投放渠道：">
<a-spin :spinning="loading">
<img :src="setImg" alt=""/>
<a-form :model="detail" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item label="投放渠道">
{{ detail.launchChannel }}
</a-form-item>
<a-form-item label="投放名称：">
<a-form-item label="投放名称">
{{ detail.launchName }}
</a-form-item>
<a-form-item label="投放触点：">
<a-form-item label="投放触点">
{{ detail.appName?detail.appName:'-' }}
</a-form-item>
<a-form-item label="渠道/触点ID：">
<a-form-item label="渠道/触点ID">
{{ detail.appId?detail.appId:'-' }}
</a-form-item>
<a-form-item label="问卷链接">
<div class="flex">
<div class="flex align-center">
<p style="color: #70B936">{{ detail.surveyUrl }}</p>
<a-button type="link" v-if="detail.surveyUrl" @click="copyUrl(detail.surveyUrl)">
<a-button type="link" v-if="detail.surveyUrl" @click="copyUrl(detail.surveyUrl)"
style="display:flex;align-items: center" >
<svg t="1742781962907" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2453" width="13" height="13"><path d="M720 192h-544A80.096 80.096 0 0 0 96 272v608C96 924.128 131.904 960 176 960h544c44.128 0 80-35.872 80-80v-608C800 227.904 764.128 192 720 192z m16 688c0 8.8-7.2 16-16 16h-544a16 16 0 0 1-16-16v-608a16 16 0 0 1 16-16h544a16 16 0 0 1 16 16v608z" p-id="2454" fill="#70b936"></path><path d="M848 64h-544a32 32 0 0 0 0 64h544a16 16 0 0 1 16 16v608a32 32 0 1 0 64 0v-608C928 99.904 892.128 64 848 64z" p-id="2455" fill="#70b936"></path><path d="M608 360H288a32 32 0 0 0 0 64h320a32 32 0 1 0 0-64zM608 520H288a32 32 0 1 0 0 64h320a32 32 0 1 0 0-64zM480 678.656H288a32 32 0 1 0 0 64h192a32 32 0 1 0 0-64z" p-id="2456" fill="#70b936"></path></svg>
复制
</a-button>
@@ -65,11 +66,11 @@
{{ detail.reason || '-' }}
</a-form-item>
</a-form>
<a-button type="" style="margin-top: 20px" class="publish-btn" @click="onClose">
</a-spin>
<a-button type="" style="margin-top: 20px;margin-left: 90px" class="publish-btn" @click="onClose">
关闭
</a-button>
</div>
</a-spin>
</a-drawer>
</template>
@@ -178,7 +179,10 @@ const setImg = computed(() => {
font-weight: 500;
label {
color: #bcbcbc;
color: #999;
&::after{
display: none;
}
}
}
.copy-icon{
@@ -220,10 +224,14 @@ const setImg = computed(() => {
}
}
}
:deep(.ant-drawer-body){
padding: 10px 24px 24px!important;
:global(.ant-drawer-title) {
font-weight: bold;
}
::v-deep .ant-drawer-body{
padding: 10px 24px 24px!important;
:global(.ant-drawer-body){
padding: 10px 24px 24px;
}
:global(.ant-drawer .ant-drawer-content){
border-radius: 12px 0 0 12px;
}
</style>

20
src/views/Publish/accurate/AccurateList.vue
View File

@@ -23,7 +23,7 @@
<div class="customer-btn" style="text-align: right">
<a-form ref="formRef" :model="ruleForm" class="search-layout accurate_list_search">
<div style="display: flex">
<a-form-item label="投放渠道" style="min-width: 250px; margin-right: 16px">
<a-form-item label="投放渠道" style="min-width: 200px; margin-right: 16px">
<a-select
v-model:value="ruleForm.parentAppId"
placeholder="请选择"
@@ -41,7 +41,7 @@
</template>
</a-select>
</a-form-item>
<a-form-item label="投放名称" style="min-width: 250px; margin-right: 16px">
<a-form-item label="投放名称" style="min-width: 200px; margin-right: 16px">
<a-input
class="custom-input"
placeholder="请输入"
@@ -50,7 +50,7 @@
</a-form-item>
</div>
<div style="display: flex">
<a-form-item label="投放触点" style="min-width: 250px; margin-right: 16px">
<a-form-item label="投放触点" style="min-width: 200px; margin-right: 16px">
<a-select
v-model:value="ruleForm.appId"
style="border-radius: 4px"
@@ -71,7 +71,7 @@
</a-form-item>
</div>
<div style="display: flex">
<a-form-item label="任务进度" style="min-width: 250px; margin-right: 16px">
<a-form-item label="任务进度" style="min-width: 200px; margin-right: 16px">
<a-select
v-model:value="ruleForm.taskProgress"
style="border-radius: 4px"
@@ -95,8 +95,8 @@
</a-form>
<div class="flex">
<div>
<a-button style="margin-right: 16px" ghost type="primary" @click="onSubmit">查询</a-button>
<a-button style="margin-right: 16px" ghost type="primary" @click="cancel">重置</a-button>
<a-button style="margin-right: 5px" ghost type="primary" @click="onSubmit">查询</a-button>
<a-button style="margin-right: 5px" ghost type="primary" @click="cancel">重置</a-button>
</div>
<a-button type="primary" class="custom-button mr-12" @click="toCreate">
<span> + 新增投放</span>
@@ -658,6 +658,9 @@ const cancelPublish = async (record) => {
};
</script>
<style lang="scss" scoped>
:deep(.ant-select-single.ant-select-show-arrow .ant-select-selection-item){
font-size: 13px;
}
.search-layout {
height: 70px;
display: flex;
@@ -674,7 +677,10 @@ const cancelPublish = async (record) => {
left: 3px;
}
}
.custom-modal .ant-modal-footer .ant-btn, .custom-button, .ant-btn.custom-button{
padding-left: 10px;
padding-right: 10px;
}
.publish-btn {
height: 32px;
border-radius: 4px;

41
src/views/Publish/accurate/channel/MiniProgram.vue
View File

@@ -4,6 +4,7 @@
:model="formState"
:rules="rules"
:label-col="labelCol"
labelAlign="left"
:wrapper-col="wrapperCol">
<a-form-item label="投放名称" name="launchName">
<a-input v-model:value="formState.launchName"
@@ -27,7 +28,7 @@
</template>
</a-textarea>
</a-form-item>
<a-form-item label="投放应用" name="desc" class="required_icon">
<a-form-item label="投放应用" required class="ant-form-item-required">
<div class="application">
<a-button type="primary" ghost class="custom-button mr-12" @click="addContact">
<span> + 添加触点</span>
@@ -37,8 +38,8 @@
需将问卷分享给对应小程序运营负责人，确认投放后请及时联系对应负责人进行小程序端相关配置
</p>
</div>
<div style="margin-top: 10px;">
<a-table :dataSource="dataSource" :columns="columns">
<div style="margin-top: 10px">
<a-table :dataSource="dataSource" :columns="columns" :pagination="false">
<template #contactPerson="{ record }">
<div>
{{ record.contactPerson }} ({{ record.contactPersonCode }})
@@ -51,7 +52,7 @@
</div>
</a-form-item>
</a-form>
<div>
<div class="ope">
<a-button
type="primary"
class="custom-button mr-12"
@@ -60,7 +61,7 @@
@click="onSubmit">
<span>确认投放</span>
</a-button>
<a-button class="custom-button mr-12" @click="cancel">
<a-button class="custom-button mr-12" @click="cancel" style="width: 98px;">
<span>取消</span>
</a-button>
</div>
@@ -106,10 +107,16 @@ const rules = {
message: '请输入投放描述',
trigger: 'blur'
}
],
appId: [
{
required: true,
message: '请输入投放描述',
}
]
};
const labelCol = ref({ span: 2 });
const labelCol = ref({ span: 1.5 });
const wrapperCol = ref({ span: 11 });
const dataSource = ref([]);
const columns = ref([
@@ -199,12 +206,14 @@ const getNodeData = (data) => {
};
const onSubmit = () => {
formRef.value.validate().then(() => {
console.log('values', formState.value);
submitData();
}).catch(error => {
console.log('error', error);
});
setTimeout(()=>{
formRef.value.validate().then(() => {
console.log('values', formState.value);
submitData();
}).catch(error => {
console.log('error', error);
});
},1000)
};
async function submitData() {
@@ -274,14 +283,14 @@ p {
&::before {
content: '*';
position: absolute;
left: -10px;
top: 50%;
//left: -10px;
//top: 50%;
transform: translateY(-50%);
color: #ff4d4f;
}
}
}
::v-deep .ant-col-2{
max-width: 5.3%;
.custom-button.ant-btn-primary[disabled], .ant-btn.custom-button.ant-btn-primary[disabled] {
border-color: transparent;
}
</style>

10
src/views/Publish/accurate/channel/SampleLibrary.vue
View File

@@ -52,7 +52,7 @@
placeholder=""/>
</a-form-item>
</a-form>
<div v-if="!isHasLink">
<div class="ope" v-if="!isHasLink">
<a-button
type="primary"
:disabled="!formState.launchName || !formState.launchMessage"
@@ -61,7 +61,7 @@
@click="nextStep">
<span>下一步</span>
</a-button>
<a-button class="custom-button mr-12" @click="onCancel">
<a-button class="custom-button mr-12" @click="onCancel" style="width: 98px;">
<span>取消</span>
</a-button>
</div>
@@ -148,7 +148,7 @@ const rules = {
}
]
};
const labelCol = ref({ span: 2 });
const labelCol = ref({ span: 1.5 });
const wrapperCol = ref({ span: 11 });
const dataSource = ref([]);
const submitLoading = ref(false);
@@ -281,7 +281,7 @@ p {
width: 16px;
height: 16px;
}
::v-deep .ant-col-2{
max-width: 5.3%;
.custom-button.ant-btn-primary[disabled], .ant-btn.custom-button.ant-btn-primary[disabled] {
border-color: transparent;
}
</style>

13
src/views/Publish/accurate/channel/Wechat.vue
View File

@@ -30,13 +30,12 @@
<a-form-item label="投放触点" name="appId" v-if="channel.appCategory === 'SHOPPING_GUIDE'">
<a-radio-group
v-model:value="formState.appId"
v-if="applicationList.length"
:disabled="applicationList.length === 1">
v-if="applicationList.length">
<a-radio v-for="(item,index) in applicationList" :key="index" :value="item.appId">{{ item.appName }}</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
<div>
<div class="ope">
<a-button
type="primary"
class="custom-button mr-12"
@@ -45,7 +44,7 @@
:disabled="!formState.launchName ||!formState.launchMessage">
<span>去配置</span>
</a-button>
<a-button class="custom-button mr-12" @click="onCancel">
<a-button class="custom-button mr-12" @click="onCancel" style="width: 98px;">
<span>取消</span>
</a-button>
</div>
@@ -92,7 +91,7 @@ const rules = {
}
]
};
const labelCol = ref({ span: 2 });
const labelCol = ref({ span: 1.5 });
const wrapperCol = ref({ span: 11 });
const dataSource = ref([]);
const applicationList = ref([])
@@ -216,7 +215,7 @@ p {
display: flex;
align-items: center;
}
::v-deep .ant-col-2{
max-width: 5.3%;
.custom-button.ant-btn-primary[disabled], .ant-btn.custom-button.ant-btn-primary[disabled] {
border-color: transparent;
}
</style>