|
|
@@ -1,32 +1,173 @@
|
|
|
<template>
|
|
|
<main class="notification">
|
|
|
- <input v-if="isEdit" type="text" v-model="title" placeholder="请输入标题" maxlength="15" />
|
|
|
- <textarea v-if="isEdit" v-model="input" @keyup.enter="updateProfile" placeholder="请输入内容"></textarea>
|
|
|
- <section v-else>
|
|
|
- <p v-if="!groupList.content">
|
|
|
- {{ $t(`TUIChat.manage.暂无公告`) }}
|
|
|
- </p>
|
|
|
- <article v-else>
|
|
|
- <h2>{{ groupList.title }}</h2>
|
|
|
- {{ groupList.content }}
|
|
|
- </article>
|
|
|
- </section>
|
|
|
- <footer v-if="isAuth">
|
|
|
- <button class="btn" v-if="isEdit" @click="updateProfile">
|
|
|
- {{ $t(`TUIChat.manage.发布`) }}
|
|
|
- </button>
|
|
|
- <button class="btn" v-else @click="isEdit = !isEdit">
|
|
|
- {{ $t(`TUIChat.manage.编辑`) }}
|
|
|
- </button>
|
|
|
- </footer>
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-item" v-for="(item, index) in groupList" :key="index">
|
|
|
+ <div class="userInfo">
|
|
|
+ <img class="img" :src="item.avatar" />
|
|
|
+
|
|
|
+ <div class="username">
|
|
|
+ <div class="users">
|
|
|
+ <span class="name">{{ item.username }}</span>
|
|
|
+ <span class="tag">{{ formatJobType(item.clientType) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="userTime">
|
|
|
+ <span class="time">{{ item.createTime }}</span>
|
|
|
+ <span class="tag" v-if="item.topFlag">置顶</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <n-popover
|
|
|
+ v-if="isAuth"
|
|
|
+ trigger="click"
|
|
|
+ ref="popoverRef"
|
|
|
+ :to="false"
|
|
|
+ placement="bottom-end"
|
|
|
+ width="160px"
|
|
|
+ :show-arrow="false"
|
|
|
+ class="popoverContainer"
|
|
|
+ >
|
|
|
+ <template #trigger>
|
|
|
+ <i class="iconMorePoint iconMore"></i>
|
|
|
+ </template>
|
|
|
+ <div class="p-list">
|
|
|
+ <div class="p-item" @click="onOperation(item, 'edit', index)">
|
|
|
+ 编辑公告
|
|
|
+ </div>
|
|
|
+ <div class="p-item" @click="onOperation(item, 'top', index)">
|
|
|
+ 设为置顶
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="p-item p-red"
|
|
|
+ @click="onOperation(item, 'delete', index)"
|
|
|
+ >
|
|
|
+ 删除公告
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </n-popover>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section-content">
|
|
|
+ <h2>{{ item.title }}</h2>
|
|
|
+ <div class="content">
|
|
|
+ {{ item.content }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list-item" v-if="groupList.length < total" @click="onMore">
|
|
|
+ 查看更多
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="theEmpty" v-if="!loading && groupList.length <= 0">
|
|
|
+ <img class="emptyImg" src="../../../assets/nomore.png" />
|
|
|
+ <p>暂无群公告</p>
|
|
|
+ <n-button
|
|
|
+ round
|
|
|
+ type="info"
|
|
|
+ class="notificationBtn"
|
|
|
+ @click="onOperation({}, 'add')"
|
|
|
+ >发布公告</n-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <n-tooltip
|
|
|
+ trigger="hover"
|
|
|
+ :show-arrow="false"
|
|
|
+ class="toolsNotifi"
|
|
|
+ v-if="groupList.length > 0 && !isEdit"
|
|
|
+ >
|
|
|
+ <template #trigger>
|
|
|
+ <div class="iconNotifiAdd" @click="onOperation({}, 'add')"></div>
|
|
|
+ </template>
|
|
|
+ 发布公告
|
|
|
+ </n-tooltip>
|
|
|
+
|
|
|
+ <div class="edit-notification" v-if="isEdit">
|
|
|
+ <div class="input-section">
|
|
|
+ <div class="input-title">
|
|
|
+ <i class="iconNotifit1"></i>
|
|
|
+ <span>公告标题</span>
|
|
|
+ </div>
|
|
|
+ <div class="input-content">
|
|
|
+ <n-input
|
|
|
+ v-model:value="title"
|
|
|
+ style="
|
|
|
+ --n-caret-color: #198cfe;
|
|
|
+ --n-border-hover: 1px solid #198cfe;
|
|
|
+ --n-border-focus: 1px solid #198cfe;
|
|
|
+ --n-loading-color: #198cfe;
|
|
|
+ --n-box-shadow-focus: 0 0 0 2px rgba(25 140 254, 0.2);
|
|
|
+ "
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入公告标题"
|
|
|
+ show-count
|
|
|
+ :maxlength="50"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="input-section">
|
|
|
+ <div class="input-title">
|
|
|
+ <i class="iconNotifit2"></i>
|
|
|
+ <span>公告内容</span>
|
|
|
+ </div>
|
|
|
+ <div class="input-content notice-content">
|
|
|
+ <n-input
|
|
|
+ v-model:value="input"
|
|
|
+ style="
|
|
|
+ --n-caret-color: #198cfe;
|
|
|
+ --n-border-hover: 1px solid #198cfe;
|
|
|
+ --n-border-focus: 1px solid #198cfe;
|
|
|
+ --n-loading-color: #198cfe;
|
|
|
+ --n-box-shadow-focus: 0 0 0 2px rgba(25 140 254, 0.2);
|
|
|
+ "
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入公告内容"
|
|
|
+ :rows="10"
|
|
|
+ show-count
|
|
|
+ :maxlength="200"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input-section">
|
|
|
+ <div class="input-title input-slider">
|
|
|
+ <span>设置为置顶</span>
|
|
|
+
|
|
|
+ <Slider :open="topFlag" />
|
|
|
+ </div>
|
|
|
+ <!-- :open="conversation.groupProfile.muteAllMembers" @change="setAllMuteTime" -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ :class="['submitBtn', !title || !input ? 'disabled' : '']"
|
|
|
+ @click="onSubmit"
|
|
|
+ >
|
|
|
+ 发布
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</main>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { defineComponent, watchEffect, reactive, toRefs, onMounted } from "vue";
|
|
|
-import { imGroupNoticePage, imGroupNoticeSave, imGroupNoticeUpdate } from "../../../../api";
|
|
|
-
|
|
|
+import {
|
|
|
+ defineComponent,
|
|
|
+ watchEffect,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+ onMounted,
|
|
|
+ ref,
|
|
|
+} from "vue";
|
|
|
+import {
|
|
|
+ imGroupNoticePage,
|
|
|
+ imGroupNoticeSave,
|
|
|
+ imGroupNoticeUpdate,
|
|
|
+ imGroupNoticeRemove,
|
|
|
+} from "../../../../api";
|
|
|
+import Slider from "../../../components/sliderTUI/index.vue";
|
|
|
const ManageNotification = defineComponent({
|
|
|
+ components: {
|
|
|
+ Slider,
|
|
|
+ },
|
|
|
props: {
|
|
|
data: {
|
|
|
type: Object,
|
|
|
@@ -40,28 +181,41 @@ const ManageNotification = defineComponent({
|
|
|
setup(props: any, ctx: any) {
|
|
|
const data: any = reactive({
|
|
|
groupProfile: {},
|
|
|
+ total: 0,
|
|
|
+ id: "",
|
|
|
title: "",
|
|
|
input: "",
|
|
|
- groupList: {},
|
|
|
+ topFlag: true, // 是否置顶
|
|
|
+ loading: false,
|
|
|
+ groupList: [],
|
|
|
isEdit: false,
|
|
|
+ page: 1,
|
|
|
+ rows: 20,
|
|
|
});
|
|
|
+ const popoverRef: any = ref();
|
|
|
const getNotification = async () => {
|
|
|
+ data.loading = true;
|
|
|
try {
|
|
|
// 获取群公告
|
|
|
let res = await imGroupNoticePage({
|
|
|
groupId: data.groupProfile.groupID,
|
|
|
- page: 1,
|
|
|
- rows: 1,
|
|
|
+ page: data.page,
|
|
|
+ rows: data.rows,
|
|
|
});
|
|
|
const result = res.data.rows || [];
|
|
|
+ data.total = res.data.total || 0;
|
|
|
if (result.length > 0) {
|
|
|
- data.input = result[0].content;
|
|
|
- data.title = result[0].title;
|
|
|
- data.groupList = result[0];
|
|
|
+ data.groupList = [...data.groupList, ...result];
|
|
|
}
|
|
|
} catch (e: any) {
|
|
|
//
|
|
|
}
|
|
|
+ data.loading = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ const onMore = () => {
|
|
|
+ data.page = data.page + 1;
|
|
|
+ getNotification();
|
|
|
};
|
|
|
|
|
|
watchEffect(() => {
|
|
|
@@ -71,44 +225,138 @@ const ManageNotification = defineComponent({
|
|
|
getNotification();
|
|
|
});
|
|
|
|
|
|
+ const formatJobType = (jobType: string) => {
|
|
|
+ const template = {
|
|
|
+ TEACHER: "音乐老师",
|
|
|
+ ADMIN: "管理员",
|
|
|
+ HEADMASTER: "校长",
|
|
|
+ } as any;
|
|
|
+ return template[jobType];
|
|
|
+ };
|
|
|
+
|
|
|
// 更新群资料
|
|
|
- const updateProfile = async () => {
|
|
|
- if (data.title && data.input) {
|
|
|
- // ctx.emit("update", { key: "notification", value: data.input });
|
|
|
- // data.groupProfile.notification = data.input;
|
|
|
- // data.input = "";
|
|
|
- try {
|
|
|
- const params = {
|
|
|
- clientType: "TEACHER",
|
|
|
+ // const updateProfile = async () => {
|
|
|
+ // if (data.title && data.input) {
|
|
|
+ // // ctx.emit("update", { key: "notification", value: data.input });
|
|
|
+ // // data.groupProfile.notification = data.input;
|
|
|
+ // // data.input = "";
|
|
|
+ // try {
|
|
|
+ // const params = {
|
|
|
+ // clientType: "TEACHER",
|
|
|
+ // groupId: data.groupProfile.groupID,
|
|
|
+ // content: data.input,
|
|
|
+ // title: data.title,
|
|
|
+ // };
|
|
|
+ // if (data.groupList.id) {
|
|
|
+ // await imGroupNoticeUpdate({
|
|
|
+ // ...params,
|
|
|
+ // id: data.groupList.id,
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // await imGroupNoticeSave(params);
|
|
|
+ // }
|
|
|
+ // data.groupList.content = data.input;
|
|
|
+ // ctx.emit("update", { key: "notification", value: data.title });
|
|
|
+ // data.groupProfile.notification = data.title;
|
|
|
+ // data.groupList.content = data.input;
|
|
|
+ // data.groupList.title = data.title;
|
|
|
+ // data.input = "";
|
|
|
+ // getNotification();
|
|
|
+ // } catch {
|
|
|
+ // //
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // data.isEdit = !data.isEdit;
|
|
|
+ // };
|
|
|
+
|
|
|
+ const onOperation = async (item: any, type: string, index?: number) => {
|
|
|
+ try {
|
|
|
+ if (type === "edit") {
|
|
|
+ ctx.emit("changeStatus", "edit");
|
|
|
+ data.isEdit = true;
|
|
|
+ data.title = item.title;
|
|
|
+ data.input = item.content;
|
|
|
+ data.topFlag = item.topFlag;
|
|
|
+ data.id = item.id;
|
|
|
+ } else if (type === "top") {
|
|
|
+ await imGroupNoticeUpdate({
|
|
|
+ groupId: data.groupProfile.groupID,
|
|
|
+ topFlag: true,
|
|
|
+ id: item.id,
|
|
|
+ });
|
|
|
+ data.page = 1;
|
|
|
+ data.groupList = [];
|
|
|
+ getNotification();
|
|
|
+ } else if (type === "delete") {
|
|
|
+ await imGroupNoticeRemove({
|
|
|
+ id: item.id,
|
|
|
+ });
|
|
|
+ data.page = 1;
|
|
|
+ data.groupList = [];
|
|
|
+ getNotification();
|
|
|
+ } else if (type === "add") {
|
|
|
+ data.isEdit = true;
|
|
|
+ data.title = "";
|
|
|
+ data.input = "";
|
|
|
+ data.topFlag = "";
|
|
|
+ data.id = "";
|
|
|
+ ctx.emit("changeStatus", "add");
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ popoverRef.value[index]?.setShow(false);
|
|
|
+ };
|
|
|
+
|
|
|
+ const onSubmit = async () => {
|
|
|
+ if (!data.title || !data.input) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ //
|
|
|
+ if (data.id) {
|
|
|
+ await imGroupNoticeUpdate({
|
|
|
groupId: data.groupProfile.groupID,
|
|
|
+ topFlag: data.topFlag,
|
|
|
+ title: data.title,
|
|
|
content: data.input,
|
|
|
+ id: data.id,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ await imGroupNoticeSave({
|
|
|
+ groupId: data.groupProfile.groupID,
|
|
|
+ topFlag: data.topFlag,
|
|
|
title: data.title,
|
|
|
- };
|
|
|
- if (data.groupList.id) {
|
|
|
- await imGroupNoticeUpdate({
|
|
|
- ...params,
|
|
|
- id: data.groupList.id,
|
|
|
- });
|
|
|
- } else {
|
|
|
- await imGroupNoticeSave(params);
|
|
|
- }
|
|
|
- data.groupList.content = data.input;
|
|
|
- ctx.emit("update", { key: "notification", value: data.title });
|
|
|
- data.groupProfile.notification = data.title;
|
|
|
- data.groupList.content = data.input;
|
|
|
- data.groupList.title = data.title;
|
|
|
- data.input = "";
|
|
|
- getNotification();
|
|
|
- } catch {
|
|
|
- //
|
|
|
+ content: data.input,
|
|
|
+ });
|
|
|
}
|
|
|
+
|
|
|
+ data.isEdit = false;
|
|
|
+ ctx.emit("changeStatus", "submit");
|
|
|
+ data.page = 1;
|
|
|
+ data.groupList = [];
|
|
|
+ getNotification();
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
}
|
|
|
- data.isEdit = !data.isEdit;
|
|
|
};
|
|
|
|
|
|
+ const onCloseEdit = () => {
|
|
|
+ data.isEdit = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ ctx.expose({
|
|
|
+ onCloseEdit,
|
|
|
+ });
|
|
|
+
|
|
|
return {
|
|
|
...toRefs(data),
|
|
|
- updateProfile,
|
|
|
+ popoverRef,
|
|
|
+ formatJobType,
|
|
|
+ onMore,
|
|
|
+ // updateProfile,
|
|
|
+ onOperation,
|
|
|
+ onSubmit,
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
@@ -119,61 +367,251 @@ export default ManageNotification;
|
|
|
@import url("../../../styles/common.scss");
|
|
|
@import url("../../../styles/icon.scss");
|
|
|
.notification {
|
|
|
+ position: relative;
|
|
|
flex: 1;
|
|
|
- padding: 20px;
|
|
|
+ // padding: 20px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- section {
|
|
|
- flex: 1;
|
|
|
- font-size: 14px;
|
|
|
- word-wrap: break-word;
|
|
|
- word-break: break-word;
|
|
|
- p {
|
|
|
- text-align: center;
|
|
|
- padding-bottom: 20px;
|
|
|
+ background: #f8f9fc;
|
|
|
+}
|
|
|
+
|
|
|
+.list-item {
|
|
|
+ padding: 13px;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.section-item {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ .userInfo {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 45px;
|
|
|
+ height: 45px;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconMore {
|
|
|
+ width: 23px;
|
|
|
+ height: 17px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .users {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .name {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
}
|
|
|
+ .tag {
|
|
|
+ margin-left: 5px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 17px;
|
|
|
+ color: #2089ff;
|
|
|
+ background: #e8f4ff;
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid rgba(25, 140, 254, 0.5);
|
|
|
+ padding: 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .userTime {
|
|
|
+ .time {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #777777;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ .tag {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #f44541;
|
|
|
+ line-height: 17px;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #f44541;
|
|
|
+ padding: 0 8px;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-content {
|
|
|
+ h2 {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #777777;
|
|
|
+ line-height: 24px;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.iconNotifiAdd {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 24px;
|
|
|
+ right: 16px;
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+}
|
|
|
+
|
|
|
+.theEmpty {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ background: #fff;
|
|
|
+ padding-bottom: 40px;
|
|
|
+
|
|
|
+ .emptyImg {
|
|
|
+ width: 210px;
|
|
|
+ height: 210px;
|
|
|
}
|
|
|
- textarea {
|
|
|
- margin-bottom: 20px;
|
|
|
- flex: 1;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10px;
|
|
|
- border: 1px solid #e8e8e9;
|
|
|
- resize: none;
|
|
|
- font-size: 14px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #aaaaaa;
|
|
|
+ line-height: 22px;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.notificationBtn {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.edit-notification {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 9;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ padding: 0 20px;
|
|
|
|
|
|
- input {
|
|
|
- margin-bottom: 20px;
|
|
|
- padding: 10px;
|
|
|
- border: 1px solid #e8e8e9;
|
|
|
- resize: none;
|
|
|
- font-size: 14px;
|
|
|
+ .input-section {
|
|
|
+ padding-top: 20px;
|
|
|
}
|
|
|
|
|
|
- h2 {
|
|
|
+ .input-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .iconNotifit1,
|
|
|
+ .iconNotifit2 {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ margin-right: 6px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ line-height: 1;
|
|
|
+ padding-bottom: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- footer {
|
|
|
+ .input-slider {
|
|
|
display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- padding: 10px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-box {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .n-input {
|
|
|
+ border-radius: 6px !important;
|
|
|
+ .n-input-wrapper {
|
|
|
+ padding-bottom: 18px !important;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-.btn {
|
|
|
- background: #3370ff;
|
|
|
- border: 0 solid #2f80ed;
|
|
|
- padding: 4px 28px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
+
|
|
|
+.submitBtn {
|
|
|
+ margin-top: 30px;
|
|
|
+ background: #198cfe;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
color: #ffffff;
|
|
|
- line-height: 24px;
|
|
|
- border-radius: 4px;
|
|
|
- &-cancel {
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid #dddddd;
|
|
|
- color: #828282;
|
|
|
+ line-height: 47px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.disabled {
|
|
|
+ opacity: 0.7;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.notice-content {
|
|
|
+ .n-input .n-input-wrapper {
|
|
|
+ padding-bottom: 18px !important;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.popoverContainer {
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.08) !important;
|
|
|
+ border-radius: 12px !important;
|
|
|
+ padding: 8px !important;
|
|
|
+ margin-top: 8px !important;
|
|
|
+
|
|
|
+ .p-item {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #131415;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 12px 0;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ background: #f3f3f5;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ &.p-red {
|
|
|
+ color: #f44541;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.toolsNotifi .n-popover__content {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.notificationBtn .n-button__content {
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
</style>
|
