Browse Source

提示框封装

pull/74/head
pengda 4 days ago
parent
commit
30f747a0c7
  1. 1
      src/assets/site/prompt-icon-1.svg
  2. 1
      src/assets/site/prompt-icon-2.svg
  3. 1
      src/assets/site/prompt-icon-3.svg
  4. 90
      src/components/PromptText.vue
  5. 7
      src/views/agent/siteServiceAdd.vue
  6. 35
      src/views/agent/siteServiceEdit.vue
  7. 62
      src/views/agent/siteServiceList.vue
  8. 6
      src/views/elementGroups.vue

1
src/assets/site/prompt-icon-1.svg

@ -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="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_217_60685"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_217_60685)"><g><path d="M8,1C9.97933,1.052,11.6278,1.7368329999999998,12.9455,3.0545C14.2632,4.372170000000001,14.948,6.02067,15,8C14.948,9.97933,14.2632,11.6278,12.9455,12.9455C11.6278,14.2632,9.97933,14.948,8,15C6.02067,14.948,4.372170000000001,14.2632,3.0545,12.9455C1.7368329999999998,11.6278,1.052,9.97933,1,8C1.052,6.02067,1.7368329999999998,4.372170000000001,3.0545,3.0545C4.372170000000001,1.7368329999999998,6.02067,1.052,8,1C8,1,8,1,8,1C8,1,8,1,8,1ZM9.047,5.297C9.318,5.297,9.542,5.21633,9.719,5.055C9.896,4.89367,9.9845,4.6775,9.9845,4.406499999999999C9.9845,4.1355,9.896,3.91933,9.719,3.758C9.542,3.59667,9.32067,3.516,9.055,3.516C8.78933,3.516,8.568,3.59667,8.391,3.758C8.214,3.91933,8.125499999999999,4.1355,8.125499999999999,4.406499999999999C8.125499999999999,4.6775,8.214,4.89367,8.391,5.055C8.568,5.21633,8.78683,5.297,9.0475,5.297C9.0475,5.297,9.047,5.297,9.047,5.297C9.047,5.297,9.047,5.297,9.047,5.297ZM9.2345,10.922C9.2345,10.85933,9.23967,10.776,9.25,10.672C9.26033,10.568,9.26033,10.469,9.25,10.375C9.25,10.375,8.422,11.328,8.422,11.328C8.33867,11.4217,8.25267,11.4947,8.164,11.547C8.075330000000001,11.5993,7.99983,11.615,7.9375,11.594C7.84383,11.5523,7.80217,11.4793,7.8125,11.375C7.8125,11.375,9.1875,7.047,9.1875,7.047C9.2395,6.75533,9.19267,6.50533,9.047,6.297C8.90133,6.08867,8.667,5.96367,8.344000000000001,5.922C7.97933,5.93233,7.58083,6.086,7.1485,6.383C6.71617,6.68,6.3385,7.05767,6.0155,7.516C6.0155,7.516,6.0155,7.7505,6.0155,7.7505C6.00517,7.85483,6.00517,7.95383,6.0155,8.0475C6.0155,8.0475,6.8435,7.0945,6.8435,7.0945C6.92683,7.00083,7.01283,6.92783,7.1015,6.8755C7.19017,6.82317,7.2605,6.8075,7.3125,6.8285C7.41683,6.8805,7.45333,6.96383,7.422,7.0785C7.422,7.0785,6.0625,11.391,6.0625,11.391C5.9895,11.6513,6.026,11.8832,6.172,12.0865C6.318,12.2898,6.57317,12.4278,6.9375,12.5005C7.4585,12.4902,7.896,12.3392,8.25,12.0475C8.604,11.7558,8.93217,11.3808,9.2345,10.9225C9.2345,10.9225,9.2345,10.922,9.2345,10.922C9.2345,10.922,9.2345,10.922,9.2345,10.922Z" fill="#006AFF" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

1
src/assets/site/prompt-icon-2.svg

@ -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="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_354_94660/23_30613"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_354_94660/23_30613)"><g><path d="M8,1C9.97933,1.052,11.6278,1.7368329999999998,12.9455,3.0545C14.2632,4.372170000000001,14.948,6.02067,15,8C14.948,9.97933,14.2632,11.6278,12.9455,12.9455C11.6278,14.2632,9.97933,14.948,8,15C6.02067,14.948,4.372170000000001,14.2632,3.0545,12.9455C1.7368329999999998,11.6278,1.052,9.97933,1,8C1.052,6.02067,1.7368329999999998,4.372170000000001,3.0545,3.0545C4.372170000000001,1.7368329999999998,6.02067,1.052,8,1C8,1,8,1,8,1C8,1,8,1,8,1ZM9.047,5.297C9.318,5.297,9.542,5.21633,9.719,5.055C9.896,4.89367,9.9845,4.6775,9.9845,4.406499999999999C9.9845,4.1355,9.896,3.91933,9.719,3.758C9.542,3.59667,9.32067,3.516,9.055,3.516C8.78933,3.516,8.568,3.59667,8.391,3.758C8.214,3.91933,8.125499999999999,4.1355,8.125499999999999,4.406499999999999C8.125499999999999,4.6775,8.214,4.89367,8.391,5.055C8.568,5.21633,8.78683,5.297,9.0475,5.297C9.0475,5.297,9.047,5.297,9.047,5.297C9.047,5.297,9.047,5.297,9.047,5.297ZM9.2345,10.922C9.2345,10.85933,9.23967,10.776,9.25,10.672C9.26033,10.568,9.26033,10.469,9.25,10.375C9.25,10.375,8.422,11.328,8.422,11.328C8.33867,11.4217,8.25267,11.4947,8.164,11.547C8.075330000000001,11.5993,7.99983,11.615,7.9375,11.594C7.84383,11.5523,7.80217,11.4793,7.8125,11.375C7.8125,11.375,9.1875,7.047,9.1875,7.047C9.2395,6.75533,9.19267,6.50533,9.047,6.297C8.90133,6.08867,8.667,5.96367,8.344000000000001,5.922C7.97933,5.93233,7.58083,6.086,7.1485,6.383C6.71617,6.68,6.3385,7.05767,6.0155,7.516C6.0155,7.516,6.0155,7.7505,6.0155,7.7505C6.00517,7.85483,6.00517,7.95383,6.0155,8.0475C6.0155,8.0475,6.8435,7.0945,6.8435,7.0945C6.92683,7.00083,7.01283,6.92783,7.1015,6.8755C7.19017,6.82317,7.2605,6.8075,7.3125,6.8285C7.41683,6.8805,7.45333,6.96383,7.422,7.0785C7.422,7.0785,6.0625,11.391,6.0625,11.391C5.9895,11.6513,6.026,11.8832,6.172,12.0865C6.318,12.2898,6.57317,12.4278,6.9375,12.5005C7.4585,12.4902,7.896,12.3392,8.25,12.0475C8.604,11.7558,8.93217,11.3808,9.2345,10.9225C9.2345,10.9225,9.2345,10.922,9.2345,10.922C9.2345,10.922,9.2345,10.922,9.2345,10.922Z" fill="#FF8C00" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

1
src/assets/site/prompt-icon-3.svg

@ -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="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_242_77707/23_30613"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_242_77707/23_30613)"><g><path d="M8,1C9.97933,1.052,11.6278,1.7368329999999998,12.9455,3.0545C14.2632,4.372170000000001,14.948,6.02067,15,8C14.948,9.97933,14.2632,11.6278,12.9455,12.9455C11.6278,14.2632,9.97933,14.948,8,15C6.02067,14.948,4.372170000000001,14.2632,3.0545,12.9455C1.7368329999999998,11.6278,1.052,9.97933,1,8C1.052,6.02067,1.7368329999999998,4.372170000000001,3.0545,3.0545C4.372170000000001,1.7368329999999998,6.02067,1.052,8,1C8,1,8,1,8,1C8,1,8,1,8,1ZM9.047,5.297C9.318,5.297,9.542,5.21633,9.719,5.055C9.896,4.89367,9.9845,4.6775,9.9845,4.406499999999999C9.9845,4.1355,9.896,3.91933,9.719,3.758C9.542,3.59667,9.32067,3.516,9.055,3.516C8.78933,3.516,8.568,3.59667,8.391,3.758C8.214,3.91933,8.125499999999999,4.1355,8.125499999999999,4.406499999999999C8.125499999999999,4.6775,8.214,4.89367,8.391,5.055C8.568,5.21633,8.78683,5.297,9.0475,5.297C9.0475,5.297,9.047,5.297,9.047,5.297C9.047,5.297,9.047,5.297,9.047,5.297ZM9.2345,10.922C9.2345,10.85933,9.23967,10.776,9.25,10.672C9.26033,10.568,9.26033,10.469,9.25,10.375C9.25,10.375,8.422,11.328,8.422,11.328C8.33867,11.4217,8.25267,11.4947,8.164,11.547C8.075330000000001,11.5993,7.99983,11.615,7.9375,11.594C7.84383,11.5523,7.80217,11.4793,7.8125,11.375C7.8125,11.375,9.1875,7.047,9.1875,7.047C9.2395,6.75533,9.19267,6.50533,9.047,6.297C8.90133,6.08867,8.667,5.96367,8.344000000000001,5.922C7.97933,5.93233,7.58083,6.086,7.1485,6.383C6.71617,6.68,6.3385,7.05767,6.0155,7.516C6.0155,7.516,6.0155,7.7505,6.0155,7.7505C6.00517,7.85483,6.00517,7.95383,6.0155,8.0475C6.0155,8.0475,6.8435,7.0945,6.8435,7.0945C6.92683,7.00083,7.01283,6.92783,7.1015,6.8755C7.19017,6.82317,7.2605,6.8075,7.3125,6.8285C7.41683,6.8805,7.45333,6.96383,7.422,7.0785C7.422,7.0785,6.0625,11.391,6.0625,11.391C5.9895,11.6513,6.026,11.8832,6.172,12.0865C6.318,12.2898,6.57317,12.4278,6.9375,12.5005C7.4585,12.4902,7.896,12.3392,8.25,12.0475C8.604,11.7558,8.93217,11.3808,9.2345,10.9225C9.2345,10.9225,9.2345,10.922,9.2345,10.922C9.2345,10.922,9.2345,10.922,9.2345,10.922Z" fill="#FF4D4F" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

90
src/components/PromptText.vue

@ -0,0 +1,90 @@
<template>
<div class="prompt-text" :class="typeClass">
<img class="prompt-icon" :src="typeIcon" alt="">
<span class="prompt-desc">{{text}}</span>
</div>
</template>
<script>
export default {
name: 'PromptText',
props: {
text: {
type: String,
required: true
},
type: {
type: [Number, String],
default: 2
},
},
components: {
},
data(){
return{}
},
computed: {
typeClass() {
switch (parseInt(this.type)) {
case 1: return 'info';
case 2: return 'notice';
case 3: return 'warning';
default: return 'notice';
}
},
typeIcon() {
switch (parseInt(this.type)) {
case 1: return require('@/assets/site/prompt-icon-1.svg');
case 2: return require('@/assets/site/prompt-icon-2.svg');
case 3: return require('@/assets/site/prompt-icon-3.svg');
default: return require('@/assets/site/prompt-icon-2.svg');
}
}
},
methods:{
}
}
</script>
<style scoped lang="scss">
.info{
display: flex;
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #F2F7FF;
border: 1px solid #BFDAFF;
}
.notice{
display: flex;
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #FEFCE8;
border: 1px solid rgba(255, 140, 0, 0.3);
}
.warning{
display: flex;
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #FFF1F0;
border: 1px solid #FFA39E;
}
.prompt-icon{
width: 16px;
height: 16px;;
margin-right: 8px;
}
.prompt-desc{
color: #1E2226;
letter-spacing: 0.08em;
}
</style>

7
src/views/agent/siteServiceAdd.vue

@ -1,9 +1,6 @@
<template>
<div>
<div class="warning-text">
<img class="warning-icon" src="@/assets/site/info_filled.svg" alt="">
<span>操作提示设置价格并保存即添加服务</span>
</div>
<PromptText text='操作提示:设置价格并保存,即添加服务' :type="2" class="mr12 ml12"/>
<div class="main-content12">
<!-- page content -->
@ -61,11 +58,13 @@ import { mapState } from 'vuex';
import GuipRadio from "@/components/GuipRadio.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipButton from "@/components/GuipButton.vue";
import PromptText from "@/components/PromptText.vue";
export default {
name: 'siteServiceAdd',
props: [''],
components: {
PromptText,
GuipButton,
GuipInput,
GuipRadio

35
src/views/agent/siteServiceEdit.vue

@ -6,19 +6,13 @@
<!-- 收款方式-->
<div class="flex-common payment-area">
<div class="notice-text">
<img class="notice-icon" src="@/assets/site/siteSemInfo_Icon.svg" alt="">
<span>按住左侧图标上下拖动可进行排序平台卡券只能放到最后</span>
</div>
<PromptText text="按住左侧图标,上下拖动可进行排序,平台卡券只能放到最后。" :type="1" class="mb32"/>
<PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
</div>
<!-- 提交页seo-->
<div class="flex-common">
<div class="warning-text">
<img class="warning-icon" src="@/assets/site/info_filled.svg" alt="">
<span>温馨提示提交页标题不允许使用知网pmlcamlcsmlc等关键词</span>
</div>
<PromptText text="温馨提示:提交页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
<el-form ref="formRef">
<div class="flex-wrap">
@ -47,10 +41,7 @@
<!-- 报告页seo-->
<div class="flex-common">
<div class="warning-text">
<img class="warning-icon" src="@/assets/site/info_filled.svg" alt="">
<span>温馨提示报告页标题不允许使用知网pmlcamlcsmlc等关键词</span>
</div>
<PromptText text="温馨提示:报告页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
<el-form ref="formRef">
<div class="flex-wrap">
@ -79,10 +70,8 @@
<!-- 展示设置-->
<div class="flex-common">
<h3 class="mb16">基础信息</h3>
<div class="warning-text">
<img class="warning-icon" src="@/assets/site/info_filled.svg" alt="">
<span>温馨提示服务别名首页服务广告词和首页服务描述不允许使用"知网""pmlc""amlc""smlc"等关键词 </span>
</div>
<PromptText text='温馨提示:服务别名、首页服务广告词和首页服务描述不允许使用"知网"、"pmlc"、"amlc"和"smlc"等关键词。' :type="2" class="mb32"/>
<el-form ref="formRef">
<div class="flex-wrap">
@ -184,10 +173,9 @@
<div class="flex-common">
<h3 class="mb16">页面色彩</h3>
<div class="notice-text">
<img class="notice-icon" src="@/assets/site/siteSemInfo_Icon.svg" alt="">
<span>操作说明点击色块可打开调色盘改色也可直接更改6位色值数据进行改色</span>
</div>
<PromptText text='操作说明:点击色块可打开调色盘改色,也可直接更改6位色值数据进行改色' :type="1" class="mb32"/>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
@ -239,6 +227,7 @@ import GuipFormItem from "@/components/GuipFormItem.vue";
import GuipInput from "@/components/GuipInput.vue";
import HoverButton from "@/components/HoverButton.vue";
import GuipSwitch from "@/components/GuipSwitch.vue";
import PromptText from "@/components/PromptText.vue";
export default {
//
@ -249,7 +238,8 @@ export default {
HoverButton,
GuipInput, GuipFormItem,
GuipButton,
PaymentMethod
PaymentMethod,
PromptText
},
data() {
return {
@ -312,6 +302,9 @@ export default {
.mb16{
margin-bottom: 16px;
}
.mb32{
margin-bottom: 32px;
}
.pageheader {
display: flex;
justify-content: space-between;

62
src/views/agent/siteServiceList.vue

@ -1,11 +1,9 @@
<template>
<div class="main-content12">
<div class="flex-common">
<h3 class="flex-service-title">服务列表</h3>
<div class="warning-text">
<img class="warning-icon" src="@/assets/site/info_filled.svg" alt="">
<span>PC端站点使用的科技清新蓝模板仅支持AI相关服务列表中置灰的服务不支持可编辑置灰服务但需更换模板才能在PC端站点显示</span>
</div>
<h3 class="mb12">服务列表</h3>
<PromptText text='PC端站点使用的“科技清新蓝”模板仅支持AI相关服务,列表中置灰的服务不支持。可编辑置灰服务,但需更换模板才能在PC端站点显示。' :type="3" class="mb24 pl-37"/>
<!-- page header -->
<div class="pageheader">
@ -128,10 +126,7 @@
<GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false" @confirm="handleConfirm"
@cancel="handleCancel" type="center" >
<div class="notice-text">
<img class="notice-icon" src="@/assets/site/siteSemInfo_Icon.svg" alt="">
<span>按住左侧图标上下拖动可进行排序平台卡券只能放到最后</span>
</div>
<PromptText text='按住左侧图标,上下拖动可进行排序,平台卡券只能放到最后。' :type="1" class="mb24 mt12"/>
<PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
</GuipDialog>
@ -159,10 +154,12 @@ import GuipInput from "@/components/GuipInput.vue";
import GuipSwitch from "@/components/GuipSwitch.vue";
import {getServicePriceDesc} from "@/utils/common";
import PaymentMethod from "@/components/paymentMethod.vue";
import PromptText from "@/components/PromptText.vue";
export default {
name: 'siteServiceList',
components: {
PromptText,
PaymentMethod,
GuipSwitch,
// eslint-disable-next-line vue/no-unused-components
@ -552,48 +549,7 @@ export default {
padding: 8px 0;
/* 根据需要调整 */
}
.flex-service-title{
margin-bottom: 12px;
}
.warning-text{
display: flex;
align-items: center;
padding: 8px 37px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #FFF1F0;
border: 1px solid #FFA39E;
.warning-icon{
width: 16px;
height: 16px;;
margin-right: 8px;
}
span{
color: #1E2226;
letter-spacing: 0.08em;
}
}
.notice-text{
display: flex;
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #F2F7FF;
border: 1px solid #BFDAFF;
margin: 12px 0 24px 0;
.notice-icon{
width: 16px;
height: 16px;;
margin-right: 8px;
}
span{
color: #1E2226;
letter-spacing: 0.08em;
}
}
.pageheader {
display: flex;
justify-content: space-between; /* 关键属性 */
@ -615,7 +571,6 @@ export default {
display: flex;
gap: 15px;
}
.pagetitle {
font-size: 18px;
font-weight: bold;
@ -640,6 +595,9 @@ export default {
.mr-16 {
margin-right: 16px;
}
.pl-37{
padding-left: 37px;
}
.normal_payment,
.self_payment {
display: flex;

6
src/views/elementGroups.vue

@ -1,6 +1,10 @@
<template>
<div class="main-content12">
<div class="elementWrap">
<PromptText text='这是一个提示框' :type="1"/>
<PromptText text='这是一个提示框' :type="2"/>
<PromptText text='这是一个提示框' :type="3"/>
<!-- ele-item 为类名的这种div label h3 仅在此页面进行布局使用复制时无需复制此元素 -->
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
@ -505,11 +509,13 @@ import GuipToolTip from '@/components/GuipToolTip.vue'
import HoverButton from '@/components/HoverButton.vue'
import GuipFormItem from '@/components/GuipFormItem.vue'
import SvgIcon from '@/components/SvgIcon.vue';
import PromptText from "@/components/PromptText.vue";
export default {
name: 'HomeView',
components: {
PromptText,
GuipTextarea,
GuipTable,
GuipSwitch,

Loading…
Cancel
Save