增加企业微信，批量填报，项目导入功能

fhKeeper/formulahousekeeper/timesheet/src/views/corpreport/list.vue

@@ -0,0 +1,607 @@
+<template>
+  <section>
+    <div>
+    <div class="sidebars" ref="sidebars" style="width: 200px;display: block;background: #fff">
+      <el-col :span="12">
+        <el-menu
+          default-active="1-1"
+          class="el-menu-vertical-demo"
+          @select="staffs"
+          background-color="#ffffff"
+          text-color="#666666"
+          active-text-color="#20A0FF"
+          style="width:100%">
+          <el-submenu index="1">
+            <template slot="title">
+              <i class="iconfont firerock-iconbaobiao"></i>
+              <span>项目报表服务</span>
+            </template>
+              <el-menu-item index="1-1"><p @click="ssl(0)">项目报表</p></el-menu-item>
+              <el-menu-item index="1-2"><p @click="ssl(1)">项目任务报表</p></el-menu-item>
+              <el-menu-item index="1-3"><p @click="ssl(2)">项目成本报表</p></el-menu-item>
+              <el-menu-item index="1-4"><p @click="ssl(3)">项目收支平衡表</p></el-menu-item>
+            </el-submenu>
+          </el-menu>
+      </el-col>
+    </div>
+     <!-- 侧边栏点击事件 -->
+      <div class="side" @click="side" ref="sid" style="left: 430px">
+        <div class="spans" ref="side" style="left: -19px;"><i  ref="sideI" class="el-icon-arrow-left"></i></div>
+      </div>
+    <!-- 内容主体区域 -->
+  <div class="contents">
+    <div class="headine" ref="headine">
+      <h3 ref="headHe" style="padding-left: 210px">{{shuz[ins]}}</h3>
+      <p style="float: right;margin-right: 25px;"><el-button type="primary" @click="exportExcel" size="mini">报表导出</el-button></p>
+    </div>
+    <div ref="staff" style="margin: 5px 0px 0px 200px; width: 84%">
+        <div class="staff">
+            <!--项目报表 -->
+            <el-table v-show="ins == 0" border :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
+                <el-table-column  prop="projectCode" label="项目编码"  width="120"></el-table-column>
+                <el-table-column  prop="projectName" label="项目名称" ></el-table-column>
+                <el-table-column prop="inchargerName" label="负责人"  width="80">
+                </el-table-column>
+                <el-table-column prop="contractAmount" label="合同金额(元)"  width="150">
+                  <template slot-scope="scope">
+                        {{scope.row.contractAmount.toFixed(2)}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="status" label="状态" width="80" >
+                    <template slot-scope="scope">
+                        {{scope.row.status == null?"-":statusTxt[scope.row.status]}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="planStartDate" label="计划开始时间"  width="120">
+                </el-table-column>
+                <el-table-column prop="planEndDate" label="计划结束时间"  width="120">
+                </el-table-column>
+                <el-table-column prop="progress" label="完成度" width="100"  >
+                    <template slot-scope="scope">
+                        {{scope.row.progress==null?"-":scope.row.progress}}%
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <!-- 项目任务报表 -->
+            <el-table v-show="ins == 1" border :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
+                <el-table-column  prop="project_code" label="项目编码"  width="120"></el-table-column>
+                <el-table-column  prop="project_name" label="项目名称" width="200"></el-table-column>
+                <el-table-column prop="name" label="任务名称"  width="300">
+                </el-table-column>
+                <el-table-column prop="plan_hours" label="计划工时(h)"  width="150">
+                  <template slot-scope="scope">
+                        {{scope.row.plan_hours.toFixed(1)}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="real_hours" label="实际工时(h)"  width="150">
+                   <template slot-scope="scope">
+                        {{scope.row.real_hours.toFixed(1)}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="task_status" label="状态" width="80" >
+                    <template slot-scope="scope">
+                        {{taskStatusTxt[scope.row.task_status]}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="task_type" label="类型"  width="120">
+                    <template slot-scope="scope">
+                        {{taskTypeTxt[scope.row.task_type]}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="end_date" label="截止日期"  width="120">
+                    <template slot-scope="scope">
+                        {{scope.row.end_date}}
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <!--项目成本报表 -->
+            <el-table v-show="ins == 2" border :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
+                <el-table-column  prop="projectCode" label="项目编码"  width="120"></el-table-column>
+                <el-table-column  prop="projectName" label="项目名称" ></el-table-column>
+                <el-table-column prop="feeMan" label="人工成本"  width="100" >
+                  <template slot-scope="scope">
+                        {{scope.row.feeMan.toFixed(2)}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="feeNormal" label="一般费用"  width="100">
+                  <template slot-scope="scope">
+                        {{scope.row.feeNormal.toFixed(2)}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="feeTravel" label="差旅费用"  width="100">
+                  <template slot-scope="scope">
+                        {{scope.row.feeTravel.toFixed(2)}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="feeOutsourcing" label="外包费用"  width="100">
+                  <template slot-scope="scope">
+                        {{scope.row.feeOutsourcing.toFixed(2)}}
+                    </template>
+                </el-table-column>
+                <el-table-column  label="总费用"  width="100">
+                  <template slot-scope="scope">
+                        {{scope.row.feeMan+scope.row.feeNormal+scope.row.feeTravel+scope.row.feeOutsourcing}}
+                    </template>
+                </el-table-column>
+            </el-table>
+            <!--项目收支平衡表 -->
+            <el-table v-show="ins == 3" border :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
+                <el-table-column prop="projectCode" label="项目编码"  width="120"></el-table-column>
+                <el-table-column prop="projectName" label="项目名称" ></el-table-column>
+                <el-table-column prop="contractAmount" label="合同金额" width="100">
+                  <template slot-scope="scope">
+                        {{scope.row.contractAmount.toFixed(2)}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="feeMan" label="人工成本"   width="100">
+                  <template slot-scope="scope">
+                        {{scope.row.feeMan.toFixed(2)}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="feeNormal" label="一般费用"  width="100">
+                  <template slot-scope="scope">
+                        {{scope.row.feeNormal.toFixed(2)}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="feeTravel" label="差旅费用"  width="100">
+                  <template slot-scope="scope">
+                        {{scope.row.feeTravel.toFixed(2)}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="feeOutsourcing" label="外包费用"  width="100">
+                  <template slot-scope="scope">
+                        {{scope.row.feeOutsourcing.toFixed(2)}}
+                    </template>
+                </el-table-column>
+                <el-table-column  label="总费用"  width="100">
+                  <template slot-scope="scope">
+                        {{scope.row.feeMan+scope.row.feeNormal+scope.row.feeTravel+scope.row.feeOutsourcing}}
+                    </template>
+                </el-table-column>
+                <el-table-column  label="利润"  width="100">
+                  <template slot-scope="scope">
+                        {{(scope.row.contractAmount==null?0:scope.row.contractAmount) - (scope.row.feeMan+scope.row.feeNormal+scope.row.feeTravel+scope.row.feeOutsourcing)}}
+                    </template>
+                </el-table-column>
+                <el-table-column  label="利润率"  width="100">
+                  <template slot-scope="scope">
+                        {{(scope.row.contractAmount==null||scope.row.contractAmount==0)?'-':((scope.row.contractAmount - (scope.row.feeMan+scope.row.feeNormal+scope.row.feeTravel+scope.row.feeOutsourcing))*100/scope.row.contractAmount).toFixed(1)+"%"}}
+                    </template>
+                </el-table-column>
+            </el-table>
+        <!--工具条-->
+        <el-col :span="24" class="toolbar">
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :page-sizes="[20 , 50 , 80 , 100]"
+                :page-size="20"
+                layout="total, sizes, prev, pager, next"
+                :total="total"
+                style="float:right;"
+            ></el-pagination>
+        </el-col>
+
+        </div>
+    </div>
+    
+  </div>
+  </div>
+    
+  </section>
+</template>
+
+<script>
+export default {
+  name: "expense",
+  components: {},
+  props: {},
+  data() {
+    return {
+      taskTypeTxt:["任务", "里程碑", "风险"],
+      taskStatusTxt:["进行中","已完成","已撤销"],
+      statusTxt:["-","进行中","已完成","已撤销"],
+      importanceList:[{id:1,label:'正常'},{id:2,label:'紧急'},{id:3,label:'重要'},{id:4,label:'重要且紧急'}],
+      listLoading:false,
+      tableHeight:0,
+      list:[],
+      total:0,
+      users: [], // 人员信息
+      displayTable: false,
+      getLists: [],
+      ProjectList: [], // 项目列表
+      page: 1,
+      size:20,
+      z   : null,
+      value: null,
+      dialog: false, // 单据查看展示
+      shuz: ["项目报表","项目任务报表","项目成本报表","项目收支平衡表(利润表)"],
+      ins: 0
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    let height = window.innerHeight;
+    this.tableHeight = height - 175;
+    const that = this;
+    window.onresize = function temp() {
+        that.tableHeight = window.innerHeight - 175;
+    };
+  },
+
+  mounted() {
+    this.getProjectList();
+  },
+  filters: {
+      numberToCurrency(value) {
+          if (!value) return '0.00'
+          value = value.toFixed(2)
+          const intPart = Math.trunc(value)
+          const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
+          let floatPart = '.00'
+          const valueArray = value.toString().split('.')
+          if (valueArray.length === 2) { // 有小数部分
+          floatPart = valueArray[1].toString() // 取得小数部分
+          return intPartFormat + '.' + floatPart
+          }
+          return intPartFormat + floatPart
+      }
+  },
+  methods: {
+            //分页
+            handleCurrentChange(val) {
+                this.page = val;
+                this.getList();
+            },
+
+            handleSizeChange(val) {
+                this.size = val;
+                this.getList();
+            },
+            getList() {
+                if (this.ins == 0) {
+                    this.getProjectList();
+                } else if (this.ins == 1) {
+                    this.getProjectTask();
+                } else if (this.ins == 2) {
+                    this.getAllProjectCost();
+                } else if (this.ins == 3) {
+                    this.getProjectInAndOut();
+                }
+            },
+      exportExcel() {
+        var url = "/project";
+        var fName = "";
+        if (this.ins == 0) {  
+          fName = "项目报表.xls";
+          url += "/exportProject";
+        } else if (this.ins == 1) {
+          fName = "项目任务报表.xls";
+          url += "/exportProjectTask";
+        } else if (this.ins == 2) {
+          fName = "项目成本报表.xls";
+          url += "/exportAllProjectCost";
+        } else if (this.ins == 3) {
+          fName = "项目收支平衡表.xls";
+          url += "/exportProjectInAndOut";
+        }
+          this.http.post(url, {},
+            res => {
+                if (res.code == "ok") {
+                    var filePath = res.data;
+                    const a = document.createElement('a'); // 创建a标签
+                    a.setAttribute('download', fName);// download属性
+                    a.setAttribute('href', filePath);// href链接
+                    a.click(); //自执行点击事件
+                    a.remove();
+                } else {
+                    this.$message({
+                    message: res.msg,
+                    type: "error"
+                    });
+                }
+            },
+            error => {
+                this.$message({
+                    message: error,
+                    type: "error"
+                });
+            });
+      },
+    ssl(index) {
+      this.z = index
+      this.ins = index;
+      this.page = 1;
+      this.pageSize = 20;
+      this.getList();
+    },
+    getProjectInAndOut() {
+      this.listLoading = true;
+      this.http.post('/project/getProjectInAndOut', {
+                    pageIndex: this.page,
+                    pageSize: this.size,
+                    },
+        res => {
+            if (res.code == "ok") {
+                this.list = res.data.records;
+                this.total = res.data.total;
+                this.listLoading = false; 
+            } else {
+                this.$message({
+                message: res.msg,
+                type: "error"
+                });
+            }
+        },
+        error => {
+            this.$message({
+                message: error,
+                type: "error"
+            });
+        });
+    },
+    getAllProjectCost() {
+      this.listLoading = true;
+      this.http.post('/project/getAllProjectCost', {
+                    pageIndex: this.page,
+                    pageSize: this.size,
+                    },
+        res => {
+            if (res.code == "ok") {
+                this.list = res.data.records;
+                this.total = res.data.total;
+                this.listLoading = false; 
+            } else {
+                this.$message({
+                message: res.msg,
+                type: "error"
+                });
+            }
+        },
+        error => {
+            this.$message({
+                message: error,
+                type: "error"
+            });
+        });
+    },
+    getProjectTask() {
+      this.listLoading = true;
+      this.http.post('/project/getProjectTask', {
+                    pageIndex: this.page,
+                    pageSize: this.size,
+                    },
+        res => {
+            if (res.code == "ok") {
+                this.list = res.data.records;
+                this.total = res.data.total;
+                this.listLoading = false; 
+            } else {
+                this.$message({
+                message: res.msg,
+                type: "error"
+                });
+            }
+        },
+        error => {
+            this.$message({
+                message: error,
+                type: "error"
+            });
+        });
+    },
+    getProjectList() {
+        this.listLoading = true;
+      this.http.post('/project/getProjectPage', {
+                    pageIndex: this.page,
+                    pageSize: this.size,
+                    },
+        res => {
+            if (res.code == "ok") {
+                this.list = res.data.records;
+                this.total = res.data.total;
+                this.listLoading = false; 
+            } else {
+                this.$message({
+                message: res.msg,
+                type: "error"
+                });
+            }
+        },
+        error => {
+            this.$message({
+                message: error,
+                type: "error"
+            });
+        });
+    },
+    // 点击侧边栏事件
+    side() {
+      if(this.$refs.side.style.left < '0px') {
+        this.$refs.sidebars.style.display = 'none'
+        this.$refs.sid.style.left = '230px'
+        this.$refs.side.style.left = '1px'
+        this.$refs.sideI.className = 'el-icon-arrow-right'
+        this.$refs.staff.style.margin = '5px 0px 0px 5px'
+        this.$refs.staff.style.width = '100%'
+        this.$refs.headHe.style.paddingLeft = '20px'
+      } else {
+        this.$refs.sidebars.style.display = 'block'
+        this.$refs.sid.style.left = '430px'
+        this.$refs.side.style.left = '-19px'
+        this.$refs.sideI.className = 'el-icon-arrow-left'
+        this.$refs.staff.style.margin = '5px 0px 0px 200px'
+        this.$refs.staff.style.width = '84%'
+        this.$refs.headHe.style.paddingLeft = '210px'
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.headine {
+  width: 100%;
+  height: 46.4px;
+  line-height: 46.4px;
+  background: #fff;
+  box-sizing: border-box;
+}
+.headine h3 {
+  margin: 0;
+  display: inline-block;
+  box-sizing: border-box;
+  color: #999;
+}
+.headine p {
+  display: inline-block;
+  margin: 0;
+}
+/* /费用报销标题 */
+.sidebars {
+  height: 100%;
+  position: absolute;
+  border-right: 1px solid #E6E6E6;
+  z-index: 2;
+  top: 0;
+}
+.sidebars h3 {
+  margin: 0;
+  line-height: 45px;
+  background: #ffffff;
+  font-weight: normal;
+  color: #666;
+  padding-left: 20px;
+}
+.sidebars .el-col-12 {
+  width: 100%
+}
+
+.public {
+  height: 230px;
+  border-bottom: 1px solid #ddd;
+}
+.public .el-form-item {
+ display: inline-block;
+}
+.pu_button {
+  text-align: right;
+  width: 100%;
+  padding: 24px 30px;
+  box-sizing: border-box;
+}
+.pu_bu_x .pu_bu_t {
+  display: inline-block;
+}
+.pu_bu_x {
+  margin-right: 20px;
+  color: #20A0F7;
+  cursor: pointer;
+}
+.pu_bu_t {
+  color: #20A0F7;
+  cursor: pointer;
+  display: block; 
+  float: right; 
+  position: 
+  relative; 
+  top: -20px; 
+  right: 63px;
+}
+.pu_table {
+  margin-left: 10px;
+}
+.pu_bu_t:hover {
+  color: #7bbcff;
+}
+.pu_bu_x:hover {
+  color: #7bbcff;
+}
+
+/* 我的单据报销凭证 */
+.staff{
+  border-left: 1px solid #fff;
+  border-top: 1px solid #fff;
+  border-right: 1px solid #fff;
+  background: #fff;
+}
+
+/*  */
+.sdat{
+    display: inline-block;
+    width: 260px;
+    margin-left: 13px;
+}
+.messages .el-form-item{
+  display: inline-block;
+}
+.messages .el-date-editor.el-input, .el-date-editor.el-input__inner{
+  width: 190px;
+}
+
+/* 我的报销单据 */
+.search {
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+.tables {
+  margin-top: 50px;
+  box-sizing: border-box;
+  padding: 10px;
+}
+.informant .el-form-item {
+  display: inline-block;
+}
+/* 侧边栏收索 */
+.side {
+  position: absolute;
+  z-index: 2;
+  border-right: 2px solid #DDDDDD;
+  height: 100%;
+  top: 0;
+  width: 0;
+}
+.side .spans {
+  width: 20px;
+  height: 30px;
+  border: 1px solid #DDDDDD;
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  margin-top: -50%;
+  text-align: center;
+  z-index: 1;
+  background: #fff;
+}
+.side .spans i{
+  margin-top: 7px;
+  color: #C0BFBF
+}
+.side:hover {
+  border-right: 2px solid #20A0FF;
+}
+.side:hover .spans {
+  border: 1px solid #20A0FF;
+  background: #20A0FF;
+}
+.side:hover .spans i{
+  color: #fff;
+}
+
+/* 右边整体页面 */
+.contents {
+  height: 100%;
+  /* padding: 30px; */
+  background: #F7F7F7;
+  /* position: absolute; */
+}
+
+.submits {
+  margin-left: 50%;
+
+}
+
+</style>

fhKeeper/formulahousekeeper/timesheet_h5/src/views/view/calendar.vue

@@ -0,0 +1,204 @@
+<template>
+    <div>
+        <van-nav-bar title="查看日报" left-text="返回" @click-left="back" fixed left-arrow/>
+        
+        <div class="login_form">
+            <van-calendar
+            :show-title="false"
+            :poppable="false"
+            :min-date="minDate"
+            :show-confirm="false"
+            :formatter="formatter"
+            :style="{ height: tableHeight+'px' }"
+            :className="'van-calendar__top-info'"
+            @select="selectDate"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                hasWaiting: false,
+                state: 0,
+                user: JSON.parse(localStorage.userInfo),
+                minDate: new Date(2010, 0, 1),
+                maxDate: new Date(new Date().getFullYear(),new Date().getMonth()+1,new Date().getDate()),
+                currentDate: new Date(),
+                nowTime: this.format(new Date(new Date()),"yyyy-MM-dd"),
+                showPicker: false,
+                report: [],
+                statusTxt:["待审核", "已通过", "已驳回", "已撤销"],
+                statusStyle:["waiting", "filledReportStyle", "RejectStyle", ""],
+                tableHeight:0,
+            };
+        },
+        created() {
+            let height = window.innerHeight;
+            this.tableHeight = height - 46;
+            const that = this;
+            window.onresize = function temp() {
+                that.tableHeight = window.innerHeight - 46;
+            };
+        },
+        methods: {
+            selectDate(value) {
+                console.log(this.format(value));
+                sessionStorage.targetDate = this.format(value);
+                this.$router.push('/view');
+            },
+            formatter(day) {
+                const month = day.date.getMonth() + 1;
+                const date = day.date.getDate();
+                if (this.format(day.date) == this.nowTime) {
+                    day.text = "今天";
+                }
+                //找到那一天的数据状态
+                let targetDate = this.format(day.date);
+                this.report.forEach(r=>{
+                    if (r.createDate == targetDate) {
+                        day.bottomInfo = this.statusTxt[r.state];
+                        day.className = this.statusStyle[r.state];
+                    }
+                })
+                
+                
+                return day;
+                },
+            // 返回
+            back() {
+                history.back();
+            },
+
+             // 时间转换
+            format(date, pattern) {
+                pattern = pattern || "yyyy-MM-dd";
+                var _this = this;
+                return pattern.replace(/([yMdhsm])(\1*)/g, function ($0) {
+                    switch ($0.charAt(0)) {
+                        case 'y': return _this.padding(date.getFullYear(), $0.length);
+                        case 'M': return _this.padding(date.getMonth() + 1, $0.length);
+                        case 'd': return _this.padding(date.getDate(), $0.length);
+                        case 'w': return date.getDay() + 1;
+                        case 'h': return _this.padding(date.getHours(), $0.length);
+                        case 'm': return _this.padding(date.getMinutes(), $0.length);
+                        case 's': return _this.padding(date.getSeconds(), $0.length);
+                    }
+                });
+            },
+
+            padding(s, len) {
+                var len = len - (s + '').length;
+                for (var i = 0; i < len; i++) { s = '0' + s; }
+                return s;
+            },
+
+            // 改变时间
+            changeTime(time) {
+                this.nowTime = this.format(new Date(time),"yyyy-MM-dd");
+                this.currentDate = time;
+                this.showPicker = false;
+                this.getReport();
+            },
+
+            // 获取日报
+            getReport() {
+                this.hasWaiting = false;
+                const toast = this.$toast.loading({
+                    forbidClick: true,
+                    duration: 0
+                });
+                this.$axios.post("/report/getReportFillStatus", {startDate: this.format(this.minDate), endDate:this.format(this.maxDate), userId: this.user.id})
+                .then(res => {
+                    if(res.code == "ok") {
+                        toast.clear();
+                        this.report = res.data;
+                        
+                    } else {
+                        toast.clear();
+                        this.$toast.fail('获取失败');
+                    }
+                }).catch(err=> {toast.clear();});
+            },
+        },
+
+        mounted() {
+            this.getReport();
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+// 日历备注
+.van-calendar__top-info {
+  background: linear-gradient(86deg, rgba(212, 165, 116, 0.98), rgba(238, 202, 163, 0.98));
+}
+
+
+    .login_form {
+        margin-top: 46px;
+    }
+
+    .one_report {
+        margin-bottom: 15px;
+        font-size:14px;
+    }
+
+    .form_text {
+        margin: 15px 0 15px;
+        padding: 0 12px;
+    }
+    
+    .form_btn {
+        text-align: right;
+    }
+
+    .form_btn button {
+        margin-left: 10px;
+    }
+
+    .one_report_data {
+        margin-bottom: 10px;
+        padding: 0 22px;
+        div {
+            line-height: 30px;
+        }
+    }
+</style>
+<style >
+.waiting {
+    color:orange;
+}
+.filledReportStyle {
+    color:#32CD32;
+
+}
+.RejectStyle {
+    color:red;
+}
+.van-calendar__bottom-info {
+    -webkit-transform: scale(0.8);
+}
+</style>
+<style lang="less">
+    .van-nav-bar .van-icon , .van-nav-bar__text {
+        color: #20a0ff;
+    }
+    .button {
+        float: right;
+        width: 50px;
+        height: 25px;
+        line-height: 25px;
+        text-align: center;
+        border: 1px solid red;
+        color: red;
+        box-sizing: border-box;
+        border-radius: 10px;
+        font-size: 14px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>