mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2026-06-12 13:41:50 +08:00
日常计划添加
This commit is contained in:
zhaoyz
parent
e674cf8cd8
commit
7273a85503
|
|
@ -0,0 +1,13 @@
|
|||
import request from "@/utils/request";
|
||||
|
||||
const addDailyPlanUrl = "/admin/dailyPlan/addDailyPlan";
|
||||
|
||||
export function addDailyPlan(param: any) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request.postForm(addDailyPlanUrl, param).then((res: any) => {
|
||||
resolve(res.data);
|
||||
}).catch(err => {
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -8,10 +8,10 @@ export function getPatientInfo(name: string, id: string, date: string) {
|
|||
patientName: name,
|
||||
idNum: id,
|
||||
date: date
|
||||
})
|
||||
}).then((res: any) => {
|
||||
console.log(res.data)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
}).then((res: any) => {
|
||||
resolve(res.data);
|
||||
}).catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -26,51 +26,64 @@ export function dateFormater(formater: string, time?: any) {
|
|||
* @returns
|
||||
*/
|
||||
export function getMonthDays(time: any) {
|
||||
if (!time) time = new Date();
|
||||
const now = new Date(time);
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
if (!time) time = new Date();
|
||||
const now = new Date(time);
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
|
||||
const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
|
||||
const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
|
||||
|
||||
const daysInMonth = month === 2
|
||||
? isLeapYear ? 29 : 28
|
||||
: month === 4 || month === 6 || month === 9 || month === 11
|
||||
? 30
|
||||
: 31;
|
||||
const daysInMonth = month === 2
|
||||
? isLeapYear ? 29 : 28
|
||||
: month === 4 || month === 6 || month === 9 || month === 11
|
||||
? 30
|
||||
: 31;
|
||||
|
||||
return daysInMonth;
|
||||
return daysInMonth;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前日期的周几 i:1,2,3,4,5,6,7
|
||||
* @returns
|
||||
*/
|
||||
export function getFirstDayOfWeek(date: Date, i: number) {
|
||||
if (i < 1 || i > 7) {
|
||||
return null;
|
||||
}
|
||||
const day = date.getDay() || 7;
|
||||
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + i - day);
|
||||
export function getFirstDayOfWeek(date: string | Date | number, i: number) {
|
||||
let temp: any;
|
||||
if (!(date instanceof Date)) {
|
||||
if (typeof date == "number") {
|
||||
temp = new Date(date);
|
||||
} else {
|
||||
const s = date.replace(/-/g, "/");
|
||||
temp = new Date(s);
|
||||
}
|
||||
} else {
|
||||
temp = new Date(date.getTime())
|
||||
}
|
||||
if (i < 1 || i > 7) {
|
||||
return null;
|
||||
}
|
||||
const day = temp.getDay() || 7;
|
||||
return new Date(temp.getFullYear(), temp.getMonth(), temp.getDate() + i - day);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前日期是周几
|
||||
* @returns
|
||||
*/
|
||||
const weekArray = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||||
export function getCurrentDate(date: any) {
|
||||
let myDate = new Date();
|
||||
if (date) {
|
||||
if (date instanceof Date) {
|
||||
myDate = date;
|
||||
} else {
|
||||
date = date.replace(/-/g, '/');
|
||||
myDate = new Date(date);
|
||||
}
|
||||
}
|
||||
|
||||
const days = myDate.getDay();
|
||||
return weekArray[days];
|
||||
export function getCurrentDate(date: any) {
|
||||
let myDate = new Date();
|
||||
if (date) {
|
||||
if (date instanceof Date) {
|
||||
myDate = date;
|
||||
} else {
|
||||
date = date.replace(/-/g, '/');
|
||||
myDate = new Date(date);
|
||||
}
|
||||
}
|
||||
|
||||
const days = myDate.getDay();
|
||||
return weekArray[days];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -78,17 +91,20 @@ export function getCurrentDate(date: any) {
|
|||
* @returns
|
||||
*/
|
||||
export function getDays(date: any, days: number) {
|
||||
if (date) {
|
||||
if (!(date instanceof Date)) {
|
||||
date = date.replace(/-/g, '/');
|
||||
date = new Date(date);
|
||||
}
|
||||
if (date) {
|
||||
let temp: any;
|
||||
if (!(date instanceof Date)) {
|
||||
date = date.replace(/-/g, '/');
|
||||
temp = new Date(date);
|
||||
} else {
|
||||
temp = new Date(date.getTime());
|
||||
}
|
||||
|
||||
const time = date.setDate(date.getDate() + days); // 天数
|
||||
return new Date(time);
|
||||
}
|
||||
const time = temp.setDate(temp.getDate() + days);
|
||||
return new Date(time);
|
||||
}
|
||||
}
|
||||
|
||||
export function getEndOfMonth(year: number, month: number) {
|
||||
return new Date(year, month, 0).getDate()
|
||||
return new Date(year, month, 0).getDate()
|
||||
}
|
||||
|
|
@ -1,66 +1,67 @@
|
|||
<template>
|
||||
<div class="home-page">
|
||||
<div class="background-box">
|
||||
<div class="left-content">
|
||||
<div class="message-box">
|
||||
<el-carousel height="32px" direction="vertical" indicator-position="none" autoplay>
|
||||
<el-carousel-item v-for="(item, index) in messages" :key="'message-' + index">
|
||||
<p class="text-row-1" style="line-height: 32px;" :class="{'is-link': item.link}" @click="() => {item.link && router.push(item.link)}">【{{ item.type }}】 {{ item.content }}</p>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="header-box">
|
||||
<div class="header-item">
|
||||
<span class="main-color f20" style="font-weight: 600;">{{ userInfo.name }}</span>
|
||||
<span class="text2-color f14">{{ userInfo.permissions }}</span>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;">
|
||||
<Calendar />
|
||||
</el-icon>
|
||||
<div>
|
||||
<p class="text1-color f14">待办任务</p>
|
||||
<p class="main-color f20">{{ total }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echart-box">
|
||||
<div class="echart-item">
|
||||
<NumberChart />
|
||||
</div>
|
||||
<div class="echart-item">
|
||||
<NumberPieChart />
|
||||
</div>
|
||||
<div class="echart-item">
|
||||
<TimeChart />
|
||||
</div>
|
||||
<div class="echart-item">
|
||||
<TimeBarChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<div class="week-calendar">
|
||||
<WeekCalendar />
|
||||
</div>
|
||||
<div class="system-logs">
|
||||
<div class="title">
|
||||
<span>系统日志</span>
|
||||
<span class="f14" style="cursor: pointer;" @click="router.push('./logs-manage/logs-manage')">更多</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<SystemLogs />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-page">
|
||||
<div class="background-box">
|
||||
<div class="left-content">
|
||||
<div class="message-box">
|
||||
<el-carousel height="32px" direction="vertical" indicator-position="none" autoplay>
|
||||
<el-carousel-item v-for="(item, index) in messages" :key="'message-' + index">
|
||||
<p class="text-row-1" style="line-height: 32px;" :class="{'is-link': item.link}"
|
||||
@click="() => {item.link && router.push(item.link)}">【{{ item.type }}】 {{ item.content }}</p>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="header-box">
|
||||
<div class="header-item">
|
||||
<span class="main-color f20" style="font-weight: 600;">{{ userInfo.name }}</span>
|
||||
<span class="text2-color f14">{{ userInfo.permissions }}</span>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;">
|
||||
<Calendar/>
|
||||
</el-icon>
|
||||
<div>
|
||||
<p class="text1-color f14">待办任务</p>
|
||||
<p class="main-color f20">{{ total }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echart-box">
|
||||
<div class="echart-item">
|
||||
<NumberChart/>
|
||||
</div>
|
||||
<div class="echart-item">
|
||||
<NumberPieChart/>
|
||||
</div>
|
||||
<div class="echart-item">
|
||||
<TimeChart/>
|
||||
</div>
|
||||
<div class="echart-item">
|
||||
<TimeBarChart/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<div class="week-calendar">
|
||||
<WeekCalendar/>
|
||||
</div>
|
||||
<div class="system-logs">
|
||||
<div class="title">
|
||||
<span>系统日志</span>
|
||||
<span class="f14" style="cursor: pointer;" @click="router.push('./logs-manage/logs-manage')">更多</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<SystemLogs/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useLoginStore } from '@/stores/user-info-store'
|
||||
import {onMounted, reactive, ref, toRefs, watch} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import {useLoginStore} from '@/stores/user-info-store'
|
||||
import NumberChart from "./number-chart.vue";
|
||||
import NumberPieChart from "./number-pie-chart.vue";
|
||||
import TimeChart from "./time-chart.vue";
|
||||
|
|
@ -75,127 +76,140 @@ const userInfo = useLoginStore().getlogin()
|
|||
const messages = ref([] as any)
|
||||
const total = ref(0) // 日历添加的记录提醒统计
|
||||
|
||||
messages.value.push({type: '通知', content: '测试测试测试测试测试测试测试测试测试测试', link: '/system-manage/system-home'})
|
||||
messages.value.push({type: '公告', content: '公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试'})
|
||||
messages.value.push({
|
||||
type: '通知',
|
||||
content: '测试测试测试测试测试测试测试测试测试测试',
|
||||
link: '/system-manage/system-home'
|
||||
})
|
||||
messages.value.push({
|
||||
type: '公告',
|
||||
content: '公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.home-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
|
||||
.background-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
padding: 20px 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-height: 900px;
|
||||
.background-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
padding: 20px 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-height: 900px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.left-content {
|
||||
width: calc(100% - 350px);
|
||||
height: 100%;
|
||||
.message-box {
|
||||
height: 34px;
|
||||
background: #f8f8f8;
|
||||
color: $text-color;
|
||||
padding: 0 30px;
|
||||
border: 1px solid $border1-color;
|
||||
margin-bottom: 20px;
|
||||
.is-link {
|
||||
cursor: pointer;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.header-box {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left-content {
|
||||
width: calc(100% - 350px);
|
||||
height: 100%;
|
||||
|
||||
.header-item {
|
||||
width: calc(60% - 20px);
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 5px $border2-color;
|
||||
padding: 0 90px;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.message-box {
|
||||
height: 34px;
|
||||
background: #f8f8f8;
|
||||
color: $text-color;
|
||||
padding: 0 30px;
|
||||
border: 1px solid $border1-color;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&~.header-item {
|
||||
width: 40%;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-link {
|
||||
cursor: pointer;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.echart-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 164px);
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.header-box {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.echart-item {
|
||||
width: calc(60% - 20px);
|
||||
height: calc(50% - 10px);
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
box-shadow: 1px 1px 5px $border2-color;
|
||||
.header-item {
|
||||
width: calc(60% - 20px);
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 5px $border2-color;
|
||||
padding: 0 90px;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
&:nth-child(even) {
|
||||
width: 40%;
|
||||
}
|
||||
&:nth-child(n + 3) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& ~ .header-item {
|
||||
width: 40%;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
width: 330px;
|
||||
height: 100%;
|
||||
.week-calendar {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
.system-logs {
|
||||
width: 100%;
|
||||
height: calc(50% - 20px);
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
.echart-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 164px);
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.echart-item {
|
||||
width: calc(60% - 20px);
|
||||
height: calc(50% - 10px);
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
box-shadow: 1px 1px 5px $border2-color;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
margin-top: 10px;
|
||||
border: 1px solid $border-color;
|
||||
padding: 30px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(even) {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&:nth-child(n + 3) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
width: 330px;
|
||||
height: 100%;
|
||||
|
||||
.week-calendar {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.system-logs {
|
||||
width: 100%;
|
||||
height: calc(50% - 20px);
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
margin-top: 10px;
|
||||
border: 1px solid $border-color;
|
||||
padding: 30px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
|
|
|
|||
|
|
@ -1,146 +1,147 @@
|
|||
<template>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="formData.type" placeholder="请选择类型">
|
||||
<el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state" placeholder="请选择状态">
|
||||
<el-select v-model="formData.state">
|
||||
<el-option v-for="item in stateOption" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="日期" prop="date">
|
||||
<el-date-picker v-model="formData.date" type="date" placeholder="请输入日期" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="时间" prop="time">
|
||||
<el-time-picker v-model="formData.time" placeholder="请输入时间" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input v-model="formData.content" type="textarea" :rows="10" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
<div style="text-align: right;" >
|
||||
<el-button v-if="formData.isSaveBtn" class="f18" type="primary" @click="saveData">保存</el-button>
|
||||
<el-button v-if="formData.isRemoveBtn" class="f18" @click="removeData">删除</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="formData.type" placeholder="请选择类型">
|
||||
<el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status" placeholder="请选择状态">
|
||||
<el-select v-model="formData.status">
|
||||
<el-option v-for="item in stateOption" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="日期" prop="date">
|
||||
<el-date-picker v-model="formData.date" type="date" placeholder="请输入日期"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="时间" prop="time">
|
||||
<el-time-picker v-model="formData.time" placeholder="请输入时间"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input v-model="formData.content" type="textarea" :rows="10" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
<div style="text-align: right;">
|
||||
<el-button v-if="isSaveBtn" class="f18" type="primary" @click="saveData">保存</el-button>
|
||||
<el-button v-if="isRemoveBtn" class="f18" @click="removeData">删除</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {onMounted, reactive, ref} from 'vue'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import {dateFormater} from "@/utils/date-util";
|
||||
|
||||
const emit = defineEmits(['close', 'saveData'])
|
||||
|
||||
const typeOption = [
|
||||
{ label: '手术', value: '手术' },
|
||||
{ label: '会议', value: '会议' },
|
||||
{label: '手术', value: '手术'},
|
||||
{label: '会议', value: '会议'},
|
||||
]
|
||||
const stateOption = [
|
||||
{ label: '已处理', value: '已处理' },
|
||||
{ label: '未处理', value: '未处理' },
|
||||
{label: '已处理', value: '已处理'},
|
||||
{label: '未处理', value: '未处理'},
|
||||
]
|
||||
const rules = reactive({
|
||||
title: [
|
||||
{ required: true, message: '请输入标题', trigger: 'blur' },
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择类型', trigger: 'blur' },
|
||||
],
|
||||
state: [
|
||||
{ required: true, message: '请选择状态', trigger: 'blur' },
|
||||
],
|
||||
date: [
|
||||
{ required: true, message: '请输入日期', trigger: 'blur' },
|
||||
],
|
||||
time: [
|
||||
{ required: true, message: '请输入时间', trigger: 'blur' },
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' },
|
||||
]
|
||||
title: [
|
||||
{required: true, message: '请输入标题', trigger: 'blur'},
|
||||
],
|
||||
type: [
|
||||
{required: true, message: '请选择类型', trigger: 'blur'},
|
||||
],
|
||||
status: [
|
||||
{required: true, message: '请选择状态', trigger: 'blur'},
|
||||
],
|
||||
date: [
|
||||
{required: true, message: '请输入日期', trigger: 'blur'},
|
||||
],
|
||||
time: [
|
||||
{required: true, message: '请输入时间', trigger: 'blur'},
|
||||
],
|
||||
content: [
|
||||
{required: true, message: '请输入内容', trigger: 'blur'},
|
||||
]
|
||||
})
|
||||
|
||||
const formRef = ref()
|
||||
const formData = ref({
|
||||
id: '',
|
||||
title: '',
|
||||
type: '',
|
||||
state: '',
|
||||
date: '',
|
||||
time: '',
|
||||
content: '',
|
||||
isSaveBtn: true,
|
||||
isRemoveBtn: true
|
||||
id: '',
|
||||
title: '',
|
||||
type: '',
|
||||
status: '',
|
||||
date: '',
|
||||
time: '',
|
||||
content: '',
|
||||
})
|
||||
const isSaveBtn = ref(true);
|
||||
const isRemoveBtn = ref(true);
|
||||
defineExpose({
|
||||
resetData
|
||||
})
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
formData.value = {
|
||||
id: '',
|
||||
title: '',
|
||||
type: '',
|
||||
state: '',
|
||||
date: '',
|
||||
time: '',
|
||||
content: '',
|
||||
isSaveBtn: true,
|
||||
isRemoveBtn: true
|
||||
}
|
||||
formData.value = {
|
||||
id: '',
|
||||
title: '',
|
||||
type: '',
|
||||
status: '',
|
||||
date: '',
|
||||
time: '',
|
||||
content: '',
|
||||
}
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
formData,
|
||||
resetData,
|
||||
})
|
||||
function close() {
|
||||
emit('close')
|
||||
emit('close')
|
||||
}
|
||||
function resetData() {
|
||||
formRef.value.resetFields()
|
||||
Object.assign(formData.value, {
|
||||
id: '',
|
||||
title: '',
|
||||
type: '',
|
||||
state: '',
|
||||
date: '',
|
||||
time: '',
|
||||
content: ''
|
||||
})
|
||||
|
||||
function resetData(hasRmBtn: boolean, date?: string) {
|
||||
formRef.value.resetFields()
|
||||
Object.assign(formData.value, {
|
||||
id: '',
|
||||
title: '',
|
||||
type: '',
|
||||
status: '',
|
||||
date: date ? date : '',
|
||||
time: '',
|
||||
content: ''
|
||||
})
|
||||
isRemoveBtn.value = hasRmBtn;
|
||||
}
|
||||
const saveData = async () => {
|
||||
await formRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
ElMessage.success('保存成功！')
|
||||
emit('saveData', formData.value)
|
||||
close()
|
||||
} else {
|
||||
// console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
|
||||
const saveData = () => {
|
||||
formRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
ElMessage.success('保存成功！');
|
||||
const form = JSON.parse(JSON.stringify(formData.value));
|
||||
form.time = dateFormater("HH:mm:ss", new Date(form.time));
|
||||
emit('saveData', form);
|
||||
close();
|
||||
} else {
|
||||
// console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
const removeData = () => {
|
||||
ElMessageBox.confirm(
|
||||
'是否确认删除？',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true
|
||||
}
|
||||
).then(() => {
|
||||
ElMessage.success('删除成功！')
|
||||
close()
|
||||
}).catch(() => { })
|
||||
ElMessageBox.confirm(
|
||||
'是否确认删除？',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true
|
||||
}
|
||||
).then(() => {
|
||||
ElMessage.success('删除成功！')
|
||||
close()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,304 +1,332 @@
|
|||
<template>
|
||||
<div class="week-calendar-part">
|
||||
<div class="header-box">
|
||||
<el-icon @click="setWeek('up')">
|
||||
<ArrowLeft />
|
||||
</el-icon>
|
||||
<div class="date-block">
|
||||
<span @click="handleOpen">{{ formatDate(month) }}</span>
|
||||
<el-date-picker ref="datePicker" popper-class="week-calendar-picker" class="month-date-pick" v-model="month"
|
||||
type="month" @change="setWeek()" />
|
||||
</div>
|
||||
<el-icon @click="setWeek('down')">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="week-box">
|
||||
<table>
|
||||
<tr class="text1-color">
|
||||
<th v-for="item in weekEn" :key="item">{{ item }}</th>
|
||||
</tr>
|
||||
<tr v-if="week.length > 0" class="">
|
||||
<td v-for="item in week" :key="item" :class="{
|
||||
<div class="week-calendar-part">
|
||||
<div class="header-box">
|
||||
<el-icon @click="minusWeek()">
|
||||
<ArrowLeft/>
|
||||
</el-icon>
|
||||
<div class="date-block">
|
||||
<span @click="handleDatePickerOpen">{{ getMonthTitle() }}</span>
|
||||
<el-date-picker ref="datePickerRef"
|
||||
popper-class="week-calendar-picker"
|
||||
class="month-date-pick"
|
||||
v-model="month"
|
||||
type="month"
|
||||
@change="setMonthWeek()"/>
|
||||
</div>
|
||||
<el-icon @click="addWeek()">
|
||||
<ArrowRight/>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="week-box">
|
||||
<table>
|
||||
<tr class="text1-color">
|
||||
<th v-for="item in weekCn" :key="item">{{ item }}</th>
|
||||
</tr>
|
||||
<tr v-if="week.length > 0" class="">
|
||||
<td v-for="item in week" :key="item" :class="{
|
||||
'record-mark': recordWeek.some((r: any) => dateFormater('yyyy-MM-dd', r.date) === dateFormater('yyyy-MM-dd', item)),
|
||||
'active': dateFormater('yyyy-MM-dd', item) === dateFormater('yyyy-MM-dd', currentDate)
|
||||
}">
|
||||
<span :class="{
|
||||
'text2-color': item.getDate() > week[6].getDate()
|
||||
}" @click="setDate(item)">{{ dateFormater('dd', item) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<el-button text icon="Plus" style="width: 100%;margin-bottom: 5px;" @click="addRecord()">新建</el-button>
|
||||
<div class="record-box ">
|
||||
<el-empty v-if="record.length < 1" :description="dateFormater('MM月dd日', currentDate) + '没有任何记录'" style="padding: 0;" />
|
||||
<div class="record-item" v-for="(item, index) in record" :key="'record-' + index" @click="viewRecord(item)">
|
||||
<div class="icon-box">
|
||||
<i class="icon-RectangleCopy"></i>
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<p class="main-color" style="font-weight: 600;cursor: pointer;">{{
|
||||
item.title }}</p>
|
||||
<p p class=" text2-color font14">{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</p>
|
||||
</div>
|
||||
<el-icon class="remove-icon" @click.stop="remoteRecord(item, index)">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<el-button text icon="Plus" style="width: 100%;margin-bottom: 5px;" @click="addRecord()">新建</el-button>
|
||||
<div class="record-box ">
|
||||
<el-empty v-if="record.length < 1" :description="dateFormater('MM月dd日', currentDate) + '没有任何记录'"
|
||||
style="padding: 0;"/>
|
||||
<div class="record-item" v-for="(item, index) in record" :key="'record-' + index" @click="viewRecord(item)">
|
||||
<div class="icon-box">
|
||||
<i class="icon-RectangleCopy"></i>
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<p class="main-color" style="font-weight: 600;cursor: pointer;">{{
|
||||
item.title
|
||||
}}</p>
|
||||
<p p class=" text2-color font14">{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</p>
|
||||
</div>
|
||||
<el-icon class="remove-icon" @click.stop="remoteRecord(item, index)">
|
||||
<Close/>
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="isRecordDialog" title="详情">
|
||||
<RecordForm ref="recordFormRef" @close="isRecordDialog = false" @saveData="saveData" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-dialog v-model="isRecordDialog" title="详情">
|
||||
<RecordForm ref="recordFormRef" @close="isRecordDialog = false" @saveData="saveData"/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import {onMounted, ref} from 'vue'
|
||||
import RecordForm from './record-form.vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { dateFormater, getFirstDayOfWeek, getDays } from '@/utils/date-util'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import {dateFormater, getDays, getFirstDayOfWeek} from '@/utils/date-util'
|
||||
|
||||
const monthCn = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
|
||||
const weekCn = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||
const datePickerRef = ref();
|
||||
const recordFormRef = ref();
|
||||
const isRecordDialog = ref(false);
|
||||
const month = ref(new Date());
|
||||
const week = ref([] as any);
|
||||
const recordWeek = ref([] as any);
|
||||
const record = ref([] as any);
|
||||
const currentDate = ref<Date>(new Date());
|
||||
|
||||
const monthEn = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
|
||||
const weekEn = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
onMounted(init)
|
||||
|
||||
const datePicker = ref()
|
||||
const recordFormRef = ref()
|
||||
const isRecordDialog = ref(false)
|
||||
const month = ref(new Date())
|
||||
const week = ref([] as any)
|
||||
const recordWeek = ref([] as any)
|
||||
const record = ref([] as any)
|
||||
const currentDate = ref<Date>(new Date())
|
||||
|
||||
setWeek()
|
||||
|
||||
function formatDate(date: any) {
|
||||
return monthEn[new Date(date).getMonth()] + '月 ' + new Date(date).getFullYear()
|
||||
function init() {
|
||||
setMonthWeek();
|
||||
}
|
||||
|
||||
function getMonthTitle() {
|
||||
return monthCn[new Date(month.value).getMonth()] + '月 ' + new Date(month.value).getFullYear();
|
||||
}
|
||||
|
||||
function addWeek() {
|
||||
const date: any = getDays(month.value, 7);
|
||||
month.value = date;
|
||||
setWeek(date);
|
||||
}
|
||||
|
||||
function minusWeek() {
|
||||
const date: any = getDays(month.value, -7);
|
||||
month.value = date;
|
||||
setWeek(date);
|
||||
}
|
||||
|
||||
function setMonthWeek() {
|
||||
setWeek(month.value);
|
||||
setDate(month.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置周
|
||||
* @param type
|
||||
* 获取一周的数据，然后给每天打 record-mark 标记
|
||||
*/
|
||||
function setWeek(type?: 'up' | 'down') {
|
||||
const date = (type && getDays(month.value, type === 'up' ? -7 : 7)) || month.value
|
||||
currentDate.value = date
|
||||
const e = date
|
||||
week.value = []
|
||||
recordWeek.value = []
|
||||
recordWeek.value = [
|
||||
{
|
||||
id: '1',
|
||||
title: '月度会议',
|
||||
type: '',
|
||||
state: '',
|
||||
date: getFirstDayOfWeek(e, 1),
|
||||
time: getFirstDayOfWeek(e, 1),
|
||||
content: '测试测试'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '手术提醒',
|
||||
type: '',
|
||||
state: '',
|
||||
date: getFirstDayOfWeek(e, 4),
|
||||
time: getFirstDayOfWeek(e, 4),
|
||||
content: '测试测试'
|
||||
}
|
||||
]
|
||||
// 定时器等待动画执行
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 7; i++) {
|
||||
week.value.push(getFirstDayOfWeek(date, i + 1))
|
||||
}
|
||||
}, 0)
|
||||
setDate(currentDate.value)
|
||||
function setWeek(date: any) {
|
||||
getWeekPlanList();
|
||||
|
||||
week.value = [];
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 7; i++) {
|
||||
week.value.push(getFirstDayOfWeek(date, i + 1));
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleOpen = () => {
|
||||
datePicker.value.handleOpen()
|
||||
function getWeekPlanList() {
|
||||
recordWeek.value = []
|
||||
/*recordWeek.value = [
|
||||
{
|
||||
id: '1',
|
||||
title: '月度会议',
|
||||
type: '',
|
||||
state: '',
|
||||
date: getFirstDayOfWeek(e, 1),
|
||||
time: getFirstDayOfWeek(e, 1),
|
||||
content: '测试测试'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '手术提醒',
|
||||
type: '',
|
||||
state: '',
|
||||
date: getFirstDayOfWeek(e, 4),
|
||||
time: getFirstDayOfWeek(e, 4),
|
||||
content: '测试测试'
|
||||
}
|
||||
]*/
|
||||
}
|
||||
|
||||
const handleDatePickerOpen = () => {
|
||||
datePickerRef.value.handleOpen();
|
||||
}
|
||||
|
||||
function setDate(e: Date) {
|
||||
currentDate.value = e
|
||||
record.value = recordWeek.value.filter((r: any) => dateFormater('yyyy-MM-dd', r.date) === dateFormater('yyyy-MM-dd', e))
|
||||
currentDate.value = e
|
||||
getDatePlanList();
|
||||
}
|
||||
|
||||
function getDatePlanList() {}
|
||||
|
||||
const addRecord = () => {
|
||||
const e = currentDate.value || new Date()
|
||||
isRecordDialog.value = true
|
||||
setTimeout(() => {
|
||||
recordFormRef.value.resetData()
|
||||
recordFormRef.value.formData.date = e
|
||||
recordFormRef.value.formData.isRemoveBtn = false
|
||||
}, 0)
|
||||
const e = currentDate.value || new Date()
|
||||
isRecordDialog.value = true
|
||||
setTimeout(() => {
|
||||
recordFormRef.value.resetData(false, dateFormater("yyyy-MM-dd", e));
|
||||
}, 0)
|
||||
}
|
||||
const viewRecord = (e: any) => {
|
||||
isRecordDialog.value = true
|
||||
setTimeout(() => {
|
||||
recordFormRef.value.resetData()
|
||||
recordFormRef.value.formData = Object.assign({}, recordFormRef.value.formData, e)
|
||||
recordFormRef.value.formData.isRemoveBtn = true
|
||||
// console.log(recordFormRef.value.formData)
|
||||
}, 0)
|
||||
isRecordDialog.value = true
|
||||
setTimeout(() => {
|
||||
recordFormRef.value.resetData(true)
|
||||
recordFormRef.value.formData = Object.assign({}, recordFormRef.value.formData, e)
|
||||
// console.log(recordFormRef.value.formData)
|
||||
}, 0)
|
||||
}
|
||||
const remoteRecord = (item: any, index: number) => {
|
||||
ElMessageBox.confirm(
|
||||
'是否确认删除？',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true
|
||||
}
|
||||
).then(() => {
|
||||
ElMessage.success('删除成功！')
|
||||
recordWeek.value = recordWeek.value.filter((r: any) => r.id !== item.id)
|
||||
setDate(item.date)
|
||||
}).catch(() => { })
|
||||
ElMessageBox.confirm(
|
||||
'是否确认删除？',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true
|
||||
}
|
||||
).then(() => {
|
||||
ElMessage.success('删除成功！')
|
||||
recordWeek.value = recordWeek.value.filter((r: any) => r.id !== item.id)
|
||||
setDate(item.date)
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
const saveData = (e: any) => {
|
||||
recordWeek.value.push(e)
|
||||
setDate(e.date)
|
||||
recordWeek.value.push(e);
|
||||
setDate(new Date(e.date));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.week-calendar-part {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.header-box {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.header-box {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.el-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.date-block {
|
||||
position: relative;
|
||||
.date-block {
|
||||
position: relative;
|
||||
|
||||
&>span {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(.month-date-pick) {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.month-date-pick) {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.week-box {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
border-top: 1px solid $border-color;
|
||||
.week-box {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
table {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
|
||||
tr {
|
||||
td {
|
||||
font-weight: 600;
|
||||
color: black;
|
||||
tr {
|
||||
td {
|
||||
font-weight: 600;
|
||||
color: black;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all .3s;
|
||||
span {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all .3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba($main-color, .1);
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: rgba($main-color, .1);
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record-mark {
|
||||
color: $main-color;
|
||||
.record-mark {
|
||||
color: $main-color;
|
||||
|
||||
span {
|
||||
border-color: $main-color;
|
||||
}
|
||||
}
|
||||
span {
|
||||
border-color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: white;
|
||||
.active {
|
||||
color: white;
|
||||
|
||||
span {
|
||||
color: white;
|
||||
border-color: $main-color;
|
||||
background: $main-color;
|
||||
span {
|
||||
color: white;
|
||||
border-color: $main-color;
|
||||
background: $main-color;
|
||||
|
||||
&:hover {
|
||||
background: rgba($main-color, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: rgba($main-color, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 170px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.record-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 170px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.record-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
transition: all .6s;
|
||||
.record-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
transition: all .6s;
|
||||
|
||||
&:hover {
|
||||
background: rgba($main-color, .1);
|
||||
transition: all .6s;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba($main-color, .1);
|
||||
transition: all .6s;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
flex-shrink: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 8px;
|
||||
background: rgba($main-color, .1);
|
||||
color: $main-color;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.icon-box {
|
||||
flex-shrink: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 8px;
|
||||
background: rgba($main-color, .1);
|
||||
color: $main-color;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
top: calc(50% - 10px);
|
||||
right: 20px;
|
||||
color: $text3-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.remove-icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
top: calc(50% - 10px);
|
||||
right: 20px;
|
||||
color: $text3-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user