From d2b700fc82336297fdc92597a4c219deeee2375f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=AE=87=E8=88=AA?= <653809315@qq.com>
Date: Thu, 25 Jul 2024 14:24:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B4=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gan-ui/src/api/app/events.js                 |   4 +-
 gan-ui/src/views/app/code/index.vue          |  12 +-
 gan-ui/src/views/app/events/detail.vue       | 135 ++++++++++++
 gan-ui/src/views/app/events/eventsAvatar.vue | 185 ++++++++++++++++
 gan-ui/src/views/app/events/index.vue        | 209 +++++++++++--------
 5 files changed, 451 insertions(+), 94 deletions(-)
 create mode 100644 gan-ui/src/views/app/events/detail.vue
 create mode 100644 gan-ui/src/views/app/events/eventsAvatar.vue

diff --git a/gan-ui/src/api/app/events.js b/gan-ui/src/api/app/events.js
index 5d20d11..0885b5c 100644
--- a/gan-ui/src/api/app/events.js
+++ b/gan-ui/src/api/app/events.js
@@ -20,7 +20,7 @@ export function getEvents(id) {
 // 新增活动发布
 export function addEvents(data) {
   return request({
-    url: '/app/events',
+    url: '/app/events/add',
     method: 'post',
     data: data
   })
@@ -29,7 +29,7 @@ export function addEvents(data) {
 // 修改活动发布
 export function updateEvents(data) {
   return request({
-    url: '/app/events',
+    url: '/app/events/edit',
     method: 'put',
     data: data
   })
diff --git a/gan-ui/src/views/app/code/index.vue b/gan-ui/src/views/app/code/index.vue
index a473b2a..9c29866 100644
--- a/gan-ui/src/views/app/code/index.vue
+++ b/gan-ui/src/views/app/code/index.vue
@@ -31,7 +31,7 @@
 
     <el-table v-loading="loading" :data="codeList" @selection-change="handleSelectionChange">
       <el-table-column label="注册码" align="center" prop="code" />
-      <el-table-column label="使用者" align="center" prop="userId" />
+      <el-table-column label="使用者" align="center" prop="userName" />
       <el-table-column label="使用时间" align="center" prop="userTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.userTime, '{y}-{m}-{d}') }}</span>
@@ -68,10 +68,14 @@
     <!-- 添加或修改用户注册码对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="注册码" prop="code">
-          <el-input v-model="form.code" placeholder="请输入注册码" />
+<!--        <el-form-item label="注册码" prop="code">-->
+<!--          <el-input v-model="form.code" placeholder="请输入注册码" />-->
+<!--        </el-form-item>-->
+        <el-form-item label="数量" prop="level" width="500px">
+          <el-input v-model="form.num" placeholder="请输入生成数量" />
         </el-form-item>
       </el-form>
+
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
@@ -111,6 +115,7 @@ export default {
         pageSize: 10,
         code: null,
         userId: null,
+        userName: null,
         updateBy: null,
         userTime: null
       },
@@ -145,6 +150,7 @@ export default {
         id: null,
         code: null,
         userId: null,
+
         createTime: null,
         updateTime: null,
         createBy: null,
diff --git a/gan-ui/src/views/app/events/detail.vue b/gan-ui/src/views/app/events/detail.vue
new file mode 100644
index 0000000..a3b5cb7
--- /dev/null
+++ b/gan-ui/src/views/app/events/detail.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="page">
+    <el-card >
+      <div slot="header" class="clearfix">
+        <span> {{ "活动标题：" + form.title }} </span>
+      </div>
+      <el-form>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <span>封面：</span>
+            <el-image
+              style="width: 100px; height: 100px"
+              :src="form.img"
+              :fit="fit"
+            ></el-image>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="姓名">{{ form.username }}</el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="省份">{{ form.provinceName }}</el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="内容">{{ form.content }}</el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="城市名">{{ form.cityName }}</el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="创建时间">{{ form.createTime }}</el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="镇名">{{ form.townName }}</el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="居住地">{{ form.cityName }}</el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <el-divider content-position="left"><h4>评论列表</h4></el-divider>
+      <el-row :gutter="20">
+        <el-col
+          :span="6"
+          v-for="item in form.appDynamicComments"
+          :key="item.id"
+        >
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span> {{ "评论编号：" + item.id }} </span>
+            </div>
+            <div class="card_content">
+              <el-image
+                style="width: 100px; height: 100px"
+                :src="item.avatarUrl"
+                :fit="fit"
+              ></el-image>
+              <div>
+                <div class="card_item">
+                  {{ "用户账号：" + item.userId }}
+                </div>
+                <div class="card_item">
+                  {{ "姓名：" + item.username }}
+                </div>
+                <div class="card_item">
+                  {{ "内容：" + item.content }}
+                </div>
+                <div class="card_item">
+                  {{ "创建时间：" + item.createTime }}
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getEvents} from "@/api/app/events";
+export default {
+  data() {
+    return {
+      id: "",
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // App用户动态表格数据
+      dynamicList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      form: {},
+    };
+  },
+  created() {
+    this.id = this.$route.query.id;
+    this.getEventsDetail(this.id);
+  },
+  methods: {
+    getEventsDetail(id) {
+      getEvents(id).then((response) => {
+        this.form = response.data;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.page {
+  padding: 20px;
+}
+.card_content {
+  display: flex;
+}
+.box-card{
+  background-color: #c7c7c7;
+}
+.card_item {
+  font-size: 12px;
+  margin: 5px;
+}
+</style>
diff --git a/gan-ui/src/views/app/events/eventsAvatar.vue b/gan-ui/src/views/app/events/eventsAvatar.vue
new file mode 100644
index 0000000..8e49f5e
--- /dev/null
+++ b/gan-ui/src/views/app/events/eventsAvatar.vue
@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog">
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <vue-cropper
+            ref="cropper"
+            :img="options.img"
+            :info="true"
+            :autoCrop="options.autoCrop"
+            :autoCropWidth="options.autoCropWidth"
+            :autoCropHeight="options.autoCropHeight"
+            :fixedBox="options.fixedBox"
+            :outputType="options.outputType"
+            @realTime="realTime"
+            v-if="visible"
+          />
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <div class="avatar-upload-preview">
+            <img :src="previews.url" :style="previews.img" />
+          </div>
+        </el-col>
+      </el-row>
+      <br />
+      <el-row>
+        <el-col :lg="2" :sm="3" :xs="3">
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+            <el-button size="small">
+              选择
+              <i class="el-icon-upload el-icon--right"></i>
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
+          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
+          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
+          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
+          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
+          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import { VueCropper } from "vue-cropper";
+import { uploadAvatar } from "@/api/system/user";
+import{ getSchool } from "@/api/app/school";
+import { debounce } from '@/utils'
+
+export default {
+  components: { VueCropper },
+  data() {
+    return {
+      // 是否显示弹出层
+      open: false,
+      // 是否显示cropper
+      visible: false,
+      // 弹出层标题
+      title: "修改头像",
+      options: {
+        img: store.getters.avatar,  //裁剪图片的地址
+        autoCrop: true,             // 是否默认生成截图框
+        autoCropWidth: 200,         // 默认生成截图框宽度
+        autoCropHeight: 200,        // 默认生成截图框高度
+        fixedBox: true,             // 固定截图框大小 不允许改变
+        outputType:"png",           // 默认生成截图为PNG格式
+        filename: 'schoolImg'          // 文件名称
+      },
+      previews: {},
+      resizeHandler: null
+    };
+  },
+  methods: {
+    // 编辑头像
+    editCropper() {
+      this.open = true;
+    },
+    // 打开弹出层结束时的回调
+    modalOpened() {
+      this.visible = true;
+      if (!this.resizeHandler) {
+        this.resizeHandler = debounce(() => {
+          this.refresh()
+        }, 100)
+      }
+      window.addEventListener("resize", this.resizeHandler)
+    },
+    // 刷新组件
+    refresh() {
+      this.$refs.cropper.refresh();
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1;
+      this.$refs.cropper.changeScale(num);
+    },
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf("image/") == -1) {
+        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
+      } else {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+          this.options.img = reader.result;
+          this.options.filename = file.name;
+        };
+      }
+    },
+    // 上传图片
+    uploadImg() {
+      this.$refs.cropper.getCropBlob(data => {
+        let formData = new FormData();
+        formData.append("avatarfile", data, this.options.filename);
+        uploadAvatar(formData).then(response => {
+          this.open = false;
+          this.options.img = response.imgUrl;
+          store.commit('SET_AVATAR', this.options.img);
+          this.$modal.msgSuccess("修改成功");
+          this.visible = false;
+        });
+      });
+    },
+    // 实时预览
+    realTime(data) {
+      this.previews = data;
+    },
+    // 关闭窗口
+    closeDialog() {
+      this.options.img = getSchool().schoolImg;
+      this.visible = false;
+      window.removeEventListener("resize", this.resizeHandler)
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.user-info-head {
+  position: relative;
+  display: inline-block;
+  height: 120px;
+}
+
+.user-info-head:hover:after {
+  content: '+';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: #eee;
+  background: rgba(0, 0, 0, 0.5);
+  font-size: 24px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  line-height: 110px;
+  border-radius: 50%;
+}
+</style>
diff --git a/gan-ui/src/views/app/events/index.vue b/gan-ui/src/views/app/events/index.vue
index bfee393..fc7abcf 100644
--- a/gan-ui/src/views/app/events/index.vue
+++ b/gan-ui/src/views/app/events/index.vue
@@ -9,14 +9,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="封面" prop="img">
-        <el-input
-          v-model="queryParams.img"
-          placeholder="请输入封面"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="负责人" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -25,34 +17,10 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="公司名称" prop="companyName">
+      <el-form-item label="活动地址" prop="companyName">
         <el-input
           v-model="queryParams.companyName"
-          placeholder="请输入公司名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="开始时间" prop="startTime">
-        <el-date-picker clearable
-          v-model="queryParams.startTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择开始时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="结束时间" prop="endTime">
-        <el-date-picker clearable
-          v-model="queryParams.endTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择结束时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="更新人" prop="updateBy">
-        <el-input
-          v-model="queryParams.updateBy"
-          placeholder="请输入更新人"
+          placeholder="请输入活动地址"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -74,64 +42,36 @@
           v-hasPermi="['app:events:add']"
         >新增</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['app:events:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['app:events:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['app:events:export']"
-        >导出</el-button>
-      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="eventsList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="话题id" align="center" prop="id" />
       <el-table-column label="活动标题" align="center" prop="title" />
-      <el-table-column label="活动内容" align="center" prop="content" />
-      <el-table-column label="封面" align="center" prop="img" />
       <el-table-column label="负责人" align="center" prop="name" />
-      <el-table-column label="公司名称" align="center" prop="companyName" />
+      <el-table-column label="活动地址" align="center" prop="companyName" />
       <el-table-column label="开始时间" align="center" prop="startTime" width="180">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="结束时间" align="center" prop="endTime" width="180">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="type" >
+        <template slot-scope="scope">
+            <el-tag :type="scope.row.type === 1 ? 'primary' : scope.row.type === 2 ? 'success' : scope.row.type === 3 ? 'danger' : 'warning'">{{scope.row.type === 1 ? '未开始' : scope.row.type === 2 ? '报名中' : scope.row.type === 3 ? '已结束' : '状态不存在'}}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="更新人" align="center" prop="updateBy" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="状态：1-未开始，2-报名中，3-已结束" align="center" prop="type" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+<!--          <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-info"-->
+<!--            @click="handleDetail(scope.row)"-->
+<!--          >详情</el-button>-->
           <el-button
             size="mini"
             type="text"
@@ -149,7 +89,7 @@
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -168,33 +108,42 @@
           <editor v-model="form.content" :min-height="192"/>
         </el-form-item>
         <el-form-item label="封面" prop="img">
-          <el-input v-model="form.img" placeholder="请输入封面" />
+          <el-upload
+            class="avatar-uploader"
+            :action="upload.uploadUrl"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload">
+            <img v-if="this.form.img" :src="this.form.img" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
         </el-form-item>
         <el-form-item label="负责人" prop="name">
           <el-input v-model="form.name" placeholder="请输入负责人" />
         </el-form-item>
-        <el-form-item label="公司名称" prop="companyName">
-          <el-input v-model="form.companyName" placeholder="请输入公司名称" />
+        <el-form-item label="活动地址" prop="companyName">
+          <el-input v-model="form.companyName" placeholder="请输入活动地址" />
         </el-form-item>
         <el-form-item label="开始时间" prop="startTime">
           <el-date-picker clearable
             v-model="form.startTime"
-            type="date"
-            value-format="yyyy-MM-dd"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
             placeholder="请选择开始时间">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="结束时间" prop="endTime">
           <el-date-picker clearable
             v-model="form.endTime"
-            type="date"
-            value-format="yyyy-MM-dd"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
             placeholder="请选择结束时间">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
+        <el-form-item label="保障" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入保障" />
         </el-form-item>
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -206,6 +155,7 @@
 
 <script>
 import { listEvents, getEvents, delEvents, addEvents, updateEvents } from "@/api/app/events";
+import {getToken} from "@/utils/auth";
 
 export default {
   name: "Events",
@@ -244,10 +194,35 @@ export default {
         type: null
       },
       // 表单参数
-      form: {},
+      form: {
+        type: 0,
+      },
       // 表单校验
       rules: {
-      }
+        title: [
+          { required: true, message: "活动标题不能为空", trigger: "blur" }
+        ],
+        content: [
+          { required: true, message: "活动内容不能为空", trigger: "blur" }
+        ],
+        remark: [
+          { required: true, message: "活动保障不能为空", trigger: "blur" }
+        ],
+      },
+      upload: {
+        // 是否显示弹出层（学校导入）
+        open: false,
+        // 弹出层标题（学校导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        uploadUrl: process.env.VUE_APP_BASE_API + "/app/api/oss/upload",
+      },
     };
   },
   created() {
@@ -284,7 +259,6 @@ export default {
         createBy: null,
         updateBy: null,
         remark: null,
-        type: null
       };
       this.resetForm("form");
     },
@@ -307,6 +281,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.form.type = 1;
       this.open = true;
       this.title = "添加活动发布";
     },
@@ -320,6 +295,36 @@ export default {
         this.title = "修改活动发布";
       });
     },
+
+    handleAvatarSuccess(res, file) {
+      console.log(res);
+      this.form.img = res.data;
+      console.log(this.img);
+    },
+
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isLt5M = file.size / 1024 / 1024 < 5;
+
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!');
+      }
+      if (!isLt5M) {
+        this.$message.error('上传头像图片大小不能超过 5MB!');
+      }
+      return isJPG && isLt5M;
+    },
+
+    handleDetail(row){
+      this.reset();
+      const id = row.id || this.ids
+      this.$router.push({
+        path: "/appData/events_detail",
+        query: {
+          id,
+        },
+      });
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
@@ -359,3 +364,29 @@ export default {
   }
 };
 </script>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>