|
|
@@ -9,146 +9,21 @@
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<div class="left">
|
|
|
- <el-form
|
|
|
- ref="ruleFormRef"
|
|
|
- style="max-width: 600px"
|
|
|
- label-width="auto"
|
|
|
- :model="ruleForm"
|
|
|
- :label-position="labelPosition"
|
|
|
- class="el-form-outer"
|
|
|
- >
|
|
|
- <el-form-item
|
|
|
- label="消息标题"
|
|
|
- prop="title"
|
|
|
- :rules="[{ required: true, message: '请输入消息标题' }]"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="ruleForm.title"
|
|
|
- placeholder="请输入20字以内的消息标题"
|
|
|
- maxlength="20"
|
|
|
- show-word-limit
|
|
|
- :disabled="isDisabled"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="消息内容" prop="content" class="transprant">
|
|
|
- <el-input
|
|
|
- v-model="ruleForm.content"
|
|
|
- placeholder="请输入500字以内的消息内容"
|
|
|
- type="textarea"
|
|
|
- :rows="5"
|
|
|
- maxlength="500"
|
|
|
- show-word-limit
|
|
|
- :disabled="isDisabled"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="推送渠道"
|
|
|
- prop="channel"
|
|
|
- :rules="[{ required: true, message: '请选择推送渠道' }]"
|
|
|
- >
|
|
|
- <el-checkbox
|
|
|
- v-model="ruleForm.channel"
|
|
|
- v-for="item in pushChannelName"
|
|
|
- :key="item.value"
|
|
|
- :value="item.value"
|
|
|
- :label="item.label"
|
|
|
- :disabled="isDisabled"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <PushObject
|
|
|
- ref="childFromRef"
|
|
|
- :recipientType="ruleForm.object.recipientType"
|
|
|
- :userGroupList="ruleForm.object.userGroupList"
|
|
|
- :customUserList="ruleForm.object.customUserList"
|
|
|
- :disabled="isDisabled"
|
|
|
- />
|
|
|
- <el-form-item label="操作人" prop="operator" class="transprant">
|
|
|
- <el-input v-model="ruleForm.operator" :disabled="true" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <!-- 基本配置 -->
|
|
|
+ <BasicInfo ref="basicInfoRef" :data-soure="ruleForm" :is-disabled="isDisabled"/>
|
|
|
+ <!-- 内容配置区域 -->
|
|
|
+ <contentConfig ref="contentConfigRef" :data-soure="ruleForm" :is-disabled="isDisabled"/>
|
|
|
+ <!-- 按钮区域 -->
|
|
|
<div class="btns" v-if="!isDisabled">
|
|
|
<div style="position: absolute; right: 0; bottom: 0">
|
|
|
- <el-button @click="refresh()">重置</el-button>
|
|
|
- <el-button type="primary" @click="submitForm()">确定</el-button>
|
|
|
+ <el-button @click="onCancel">取消</el-button>
|
|
|
+ <el-button @click="onSave">暂存</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm">确定</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="right">
|
|
|
- <div class="top-head">
|
|
|
- 实时效果
|
|
|
- <el-tooltip
|
|
|
- effect="dark"
|
|
|
- content="实例样式仅供参考，最终展示以线上为准"
|
|
|
- placement="top-start"
|
|
|
- >
|
|
|
- <img src="@/assets/icons/info.png" />
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="tabs">
|
|
|
- <el-tabs v-model="activeName">
|
|
|
- <el-tab-pane label="平台侧" name="platform" class="platform">
|
|
|
- <div class="tabs-content">
|
|
|
- <div class="title">
|
|
|
- <div class="vertical"></div>
|
|
|
- <span>卡片页:</span>
|
|
|
- </div>
|
|
|
- <div class="card">
|
|
|
- <div class="card-title"
|
|
|
- >系统公告<a>去查看<img src="@/assets/icons/arrow.png" /></a
|
|
|
- ></div>
|
|
|
- <div class="card-content">
|
|
|
- <p style="font-size: 12px; color: #969799">2024年6月25日 16:45:06</p>
|
|
|
- <p style="margin-top: 5px; font-size: 13px; color: #646566">
|
|
|
- {{ ruleForm.title || title }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="tabs-content">
|
|
|
- <div class="title">
|
|
|
- <div class="vertical"></div>
|
|
|
- <span>详情页:</span>
|
|
|
- </div>
|
|
|
- <div class="info">
|
|
|
- <div class="info-title"> {{ ruleForm.title || title }} </div>
|
|
|
- <div class="info-content">
|
|
|
- <span>{{ ruleForm.content || content }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="蓝信侧" name="lanxin" class="lanxin">
|
|
|
- <div class="tabs-content">
|
|
|
- <div class="title">
|
|
|
- <div class="vertical"></div>
|
|
|
- <span>卡片页:</span>
|
|
|
- </div>
|
|
|
- <div class="card">
|
|
|
- <div class="card-title">系统公告</div>
|
|
|
- <div class="card-content">
|
|
|
- <p style="margin-top: 5px; font-size: 13px; color: #646566">
|
|
|
- {{ ruleForm.title || title }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <img src="@/assets/icons/link_icon.png" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="tabs-content">
|
|
|
- <div class="title">
|
|
|
- <div class="vertical"></div>
|
|
|
- <span>详情页:</span>
|
|
|
- </div>
|
|
|
- <div class="info">
|
|
|
- <div class="info-title"> {{ ruleForm.title || title }} </div>
|
|
|
- <div class="info-content">
|
|
|
- <span>{{ ruleForm.content || content }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- 实时预览 -->
|
|
|
+ <RightCard :rule-form="ruleForm"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -157,85 +32,41 @@
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
- import { debounce } from 'lodash-es';
|
|
|
- import { ElMessage } from 'element-plus';
|
|
|
+ import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
import { useUserStore } from '@/store/modules/user';
|
|
|
- import { pushChannelName } from '../constant';
|
|
|
- import type { FormProps } from 'element-plus';
|
|
|
- import PushObject from '../components/PushObject.vue';
|
|
|
- import type { FormInstance } from 'element-plus';
|
|
|
import {
|
|
|
- queryReportConfigListParams,
|
|
|
- queryReportConfigList,
|
|
|
+ addSystemMessage,
|
|
|
confirmReportConfig,
|
|
|
viewSystemMessage,
|
|
|
} from '@/api/message/sysnotion-config';
|
|
|
- import { ObjectFrom } from './type';
|
|
|
- const title = ref<string>('本系统进行了重大升级，请查看详细内容');
|
|
|
- const content = ref<string>(
|
|
|
- '尊敬的用户：\n 我们计划于2024年9月5日进行平台系统升级，以提升服务性能和用户体验，升级期间，平台将暂时不可用，预计停机时间为4小时，从上午2:00至6:00。请您提前做好相关安排，以避免不便，感谢您的理解与支持。如有疑问，请联系客服支持团队。\n敬请留意。\n天眼团队',
|
|
|
- );
|
|
|
+ import { RuleFormProps, MessageTypeEnum } from './type';
|
|
|
+ import BasicInfo from './compontents/BasicInfo.vue';
|
|
|
+ import ContentConfig from './compontents/ContentConfig.vue';
|
|
|
+ import RightCard from './compontents/RightCard.vue';
|
|
|
+
|
|
|
const isDisabled = ref<boolean>(false);
|
|
|
- const ruleFormRef = ref<FormInstance>();
|
|
|
- const childFromRef = ref();
|
|
|
- const validate = ref<boolean>();
|
|
|
const useUser = useUserStore();
|
|
|
const { info } = storeToRefs(useUser);
|
|
|
- const labelPosition = ref<FormProps['labelPosition']>('left');
|
|
|
- interface RuleForm {
|
|
|
- title: string;
|
|
|
- content: string;
|
|
|
- channel: number[];
|
|
|
- object: ObjectFrom;
|
|
|
- operator: string;
|
|
|
- }
|
|
|
- const ruleForm = reactive<RuleForm>({
|
|
|
+ const basicInfoRef = ref<InstanceType<typeof BasicInfo>>()
|
|
|
+ const contentConfigRef = ref<InstanceType<typeof ContentConfig>>()
|
|
|
+ const ruleForm = reactive<RuleFormProps>({
|
|
|
+ messageType: MessageTypeEnum.BANNER,
|
|
|
+ bannerUrl: '',
|
|
|
title: '',
|
|
|
+ pushChannel: [],
|
|
|
+ recipientType: {},
|
|
|
+ expirationTime: '',
|
|
|
+ introduction: '',
|
|
|
+ contentType: 1,
|
|
|
content: '',
|
|
|
- channel: [],
|
|
|
- object: {},
|
|
|
operator: info.value.nickname,
|
|
|
});
|
|
|
- const activeName = ref('platform');
|
|
|
- const debounceEmit = debounce((params) => {
|
|
|
- queryReportConfigList(params)
|
|
|
- .then((res) => {
|
|
|
- confirmReportConfig(res).then(() => {
|
|
|
- ElMessage({
|
|
|
- message: '下发成功!',
|
|
|
- type: 'success',
|
|
|
- });
|
|
|
- router.back();
|
|
|
- });
|
|
|
- })
|
|
|
- .catch((e) => console.error(e));
|
|
|
- }, 500);
|
|
|
- const submitForm = () => {
|
|
|
- const childValue = childFromRef.value!.getChildValue();
|
|
|
- childFromRef.value!.submitForm().then((res) => {
|
|
|
- validate.value = res;
|
|
|
- });
|
|
|
- ruleFormRef.value!.validate((valid) => {
|
|
|
- if (validate.value && valid) {
|
|
|
- const params: queryReportConfigListParams = {
|
|
|
- content: ruleForm.content,
|
|
|
- title: ruleForm.title,
|
|
|
- pushChannel: ruleForm.channel.map((item) => item),
|
|
|
- recipientType: childValue.recipientType,
|
|
|
- userGroupList: childValue.userGroupList,
|
|
|
- customUserList: childValue.customUserList,
|
|
|
- };
|
|
|
- debounceEmit(params);
|
|
|
- } else {
|
|
|
- console.log('下发失败');
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
- const refresh = () => {
|
|
|
- if (!ruleFormRef.value) return;
|
|
|
- ruleFormRef.value.resetFields();
|
|
|
- childFromRef.value.refreshForm();
|
|
|
+
|
|
|
+ // 原始数据副本
|
|
|
+ let originalData: RuleFormProps = {
|
|
|
+ ...ruleForm,
|
|
|
};
|
|
|
+
|
|
|
const router = useRouter();
|
|
|
const rollback = () => {
|
|
|
router.back();
|
|
|
@@ -248,17 +79,103 @@
|
|
|
viewSystemMessage(Number(sysId)).then((res) => {
|
|
|
ruleForm.title = res.title;
|
|
|
ruleForm.content = res.content ? res.content : ' ';
|
|
|
- ruleForm.channel = res.pushChannel;
|
|
|
- ruleForm.object.recipientType = res.recipientType;
|
|
|
+ ruleForm.pushChannel = res.pushChannel;
|
|
|
+ ruleForm.recipientType.recipientType = res.recipientType;
|
|
|
if (res.recipientType === 2) {
|
|
|
- ruleForm.object.userGroupList = res.userGroupList;
|
|
|
+ ruleForm.recipientType.userGroupList = res.userGroupList;
|
|
|
}
|
|
|
if (res.recipientType === 3) {
|
|
|
- ruleForm.object.customUserList = res.customUserList;
|
|
|
+ ruleForm.recipientType.customUserList = res.customUserList;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+// 取消
|
|
|
+const onCancel = () => {
|
|
|
+ // 比对数据
|
|
|
+ const changes = compareData(ruleForm, originalData);
|
|
|
+ console.log('Object.keys(changes): ', Object.keys(changes));
|
|
|
+
|
|
|
+ // ElMessageBox.confirm(
|
|
|
+ // '您对系统通知的额操作尚未保存，请问是否暂存?',
|
|
|
+ // '提示',
|
|
|
+ // {
|
|
|
+ // confirmButtonText: '暂存',
|
|
|
+ // cancelButtonText: '取消',
|
|
|
+ // type: 'warning',
|
|
|
+ // }
|
|
|
+ // )
|
|
|
+ // .then(() => {
|
|
|
+ // ElMessage({
|
|
|
+ // type: 'success',
|
|
|
+ // message: '暂存成功',
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // .catch(() => {
|
|
|
+ // ElMessage({
|
|
|
+ // type: 'info',
|
|
|
+ // message: '取消暂存',
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+}
|
|
|
+
|
|
|
+// 暂存
|
|
|
+const onSave = async() => {
|
|
|
+ // to save dada
|
|
|
+ const baseInfoData = await basicInfoRef.value?.validate();
|
|
|
+ const contentConfigData = contentConfigRef.value?.buildFormdata();
|
|
|
+ console.log('contentConfigData: ', contentConfigData);
|
|
|
+ console.log('baseInfoDara: ', baseInfoData);
|
|
|
+
|
|
|
+ const {messageType, title,pushChannel, expirationTime, bannerUrl, recipientType} = baseInfoData
|
|
|
+ const params = {
|
|
|
+ ...contentConfigData,
|
|
|
+ messageType,
|
|
|
+ title,
|
|
|
+ pushChannel,
|
|
|
+ expirationTime,
|
|
|
+ bannerUrl,
|
|
|
+ recipientType: recipientType.recipientType,
|
|
|
+ customUserList: recipientType.customUserList,
|
|
|
+ userGroupList: recipientType.userGroupList,
|
|
|
+ contentUrl: '',
|
|
|
+
|
|
|
+ }
|
|
|
+ delete params.operator
|
|
|
+ addSystemMessage(params).then((res) => {
|
|
|
+ if (res) {
|
|
|
+ ElMessage({
|
|
|
+ message: '暂存成功!',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ }
|
|
|
+});
|
|
|
+ }
|
|
|
+
|
|
|
+ const submitForm = () => {
|
|
|
+ confirmReportConfig(1).then(() => {
|
|
|
+ ElMessage({
|
|
|
+ message: '下发成功!',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ router.back();
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 比对方法
|
|
|
+ const compareData = (newData: RuleFormProps, oldData: RuleFormProps) => {
|
|
|
+ const diff: Partial<
|
|
|
+ Omit<RuleFormProps, 'content'>
|
|
|
+ > = {};
|
|
|
+ for (const key in newData) {
|
|
|
+ if (newData[key as keyof RuleFormProps] !== oldData[key as keyof RuleFormProps]) {
|
|
|
+ diff[key as keyof RuleFormProps] = newData[key as keyof RuleFormProps];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return diff;
|
|
|
+ };
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -318,220 +235,7 @@
|
|
|
position: relative;
|
|
|
}
|
|
|
}
|
|
|
- .right {
|
|
|
- width: 380px;
|
|
|
- height: 100%;
|
|
|
- padding: 20px 9px 0 20px;
|
|
|
- .top-head {
|
|
|
- display: flex;
|
|
|
- gap: 7px;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- height: 22px;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
- line-height: 22px;
|
|
|
- img {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- .tabs {
|
|
|
- margin-top: 14px;
|
|
|
- overflow-y: auto;
|
|
|
- :deep(.el-tabs__header) {
|
|
|
- margin: 0 0 22px;
|
|
|
- }
|
|
|
- :deep(.is-top) {
|
|
|
- font-weight: 550;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- :deep(.el-tabs__nav-wrap::after) {
|
|
|
- height: 0px;
|
|
|
- }
|
|
|
- .platform {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 24px;
|
|
|
- .tabs-content {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- max-height: calc(100vh - 450px);
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 12px;
|
|
|
- gap: 18px;
|
|
|
- width: 100%;
|
|
|
- height: 31px;
|
|
|
- .vertical {
|
|
|
- width: 4px;
|
|
|
- height: 12px;
|
|
|
- background: #1777ff;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- span {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #303133;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .card {
|
|
|
- width: 100%;
|
|
|
- height: 124px;
|
|
|
- padding: 10px 14px 0 12px;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- .card-title {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 15px;
|
|
|
- color: #646566;
|
|
|
- line-height: 20px;
|
|
|
- a {
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- cursor: default;
|
|
|
- }
|
|
|
- }
|
|
|
- .card-content {
|
|
|
- margin-top: 15px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .info {
|
|
|
- width: 100%;
|
|
|
- max-height: calc(100vh - 450px - 32px);
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- .info-title {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- height: 41px;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
- line-height: 22px;
|
|
|
- border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- }
|
|
|
- .info-content {
|
|
|
- width: 100%;
|
|
|
- max-height: calc(100vh - 450px - 32px - 55px);
|
|
|
- overflow-y: auto;
|
|
|
- padding: 12px 7px 12px 12px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #646566;
|
|
|
- line-height: 22px;
|
|
|
- word-wrap: break-word;
|
|
|
- white-space: pre-wrap;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .lanxin {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 24px;
|
|
|
- .tabs-content {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- max-height: calc(100vh - 400px);
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 12px;
|
|
|
- gap: 18px;
|
|
|
- width: 100%;
|
|
|
- height: 31px;
|
|
|
- .vertical {
|
|
|
- width: 4px;
|
|
|
- height: 12px;
|
|
|
- background: #1777ff;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- span {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #303133;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .card {
|
|
|
- width: 100%;
|
|
|
- height: 79px;
|
|
|
- padding: 10px 14px 0 12px;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- position: relative;
|
|
|
- .card-title {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 15px;
|
|
|
- color: #646566;
|
|
|
- line-height: 20px;
|
|
|
- a {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- .card-content {
|
|
|
- margin-top: 15px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- img {
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- right: 17px;
|
|
|
- }
|
|
|
- }
|
|
|
- .info {
|
|
|
- width: 100%;
|
|
|
- max-height: calc(100vh - 400px - 50px);
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- .info-title {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- height: 41px;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
- line-height: 22px;
|
|
|
- border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- }
|
|
|
- .info-content {
|
|
|
- width: 100%;
|
|
|
- max-height: calc(100vh - 400px - 32px - 41px);
|
|
|
- overflow-y: auto;
|
|
|
- padding: 12px 7px 12px 12px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #646566;
|
|
|
- line-height: 22px;
|
|
|
- word-wrap: break-word;
|
|
|
- white-space: pre-wrap;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</style>
|
qindao