|
|
@@ -0,0 +1,590 @@
|
|
|
+<template>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="left">
|
|
|
+ <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
|
|
|
+ <span class="cameratxt">优惠券记录</span>
|
|
|
+ </div>
|
|
|
+ <div class="middle">
|
|
|
+ <div class="filter">
|
|
|
+ <div class="condition">
|
|
|
+ <span>状态 : </span>
|
|
|
+ <el-select
|
|
|
+ style="width: 180px"
|
|
|
+ v-model="searchInput.car_number"
|
|
|
+ class="m-2"
|
|
|
+ placeholder="请选择状态"
|
|
|
+ :clearable="true"
|
|
|
+ >
|
|
|
+ <el-option label="全部" value="全部" />
|
|
|
+ <el-option label="启用中" value="启用中" />
|
|
|
+ <el-option label="未开启" value="未开启" />
|
|
|
+ <el-option label="已过期" value="已过期" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="condition">
|
|
|
+ <span>优惠券类型 : </span>
|
|
|
+ <el-select
|
|
|
+ style="width: 200px"
|
|
|
+ v-model="searchInput.car_number"
|
|
|
+ class="m-2"
|
|
|
+ placeholder="请选择优惠券类型"
|
|
|
+ :clearable="true"
|
|
|
+ >
|
|
|
+ <el-option label="全部" value="全部" />
|
|
|
+ <el-option label="平台赠送" value="平台赠送" />
|
|
|
+ <el-option label="司机赔偿" value="司机赔偿" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="condition">
|
|
|
+ <span>手机号 : </span>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="searchInput.name"
|
|
|
+ class="w-50 m-2"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ style="width: 20 0px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ color="rgba(61, 81, 232, 1)"
|
|
|
+ type="primary"
|
|
|
+ class="search"
|
|
|
+ @click="searchBtn"
|
|
|
+ ><el-icon><Search /></el-icon> <span>查询</span></el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ style="margin-left: 20px !important;"
|
|
|
+ color="rgba(61, 81, 232, 1)"
|
|
|
+ type="primary"
|
|
|
+ class="search"
|
|
|
+ @click="searchRefresh"
|
|
|
+ ><el-icon><Refresh /></el-icon><span>重置</span></el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <!-- <div class="gongneng"></div> -->
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <el-table
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ :data="tableData.list"
|
|
|
+ style="width: 100%"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'rgba(240, 243, 247, 1)',
|
|
|
+ height: '50px',
|
|
|
+ border: 0,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <!-- <el-table-column align="center" type="selection" width="80" /> -->
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="80"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ index="1"
|
|
|
+ />
|
|
|
+ <el-table-column align="center" prop="user_name" label="昵称" />
|
|
|
+ <el-table-column align="center" prop="user_name" label="头像" />
|
|
|
+ <el-table-column align="center" prop="user_name" label="手机号" />
|
|
|
+ <el-table-column align="center" prop="user_name" label="优惠券名称" />
|
|
|
+ <el-table-column align="center" prop="user_name" label="图片" />
|
|
|
+ <el-table-column align="center" prop="user_name" label="优惠券类型" />
|
|
|
+ <el-table-column align="center" prop="user_name" label="优惠券金额" />
|
|
|
+ <el-table-column align="center" prop="user_name" label="最低消费金额" />
|
|
|
+ <el-table-column align="center" prop="user_name" label="发放时间" />
|
|
|
+ <el-table-column align="center" prop="user_name" label="过期时间" />
|
|
|
+ <el-table-column align="center" prop="user_zz" label="状态" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 分页组件 -->
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, prev, pager, next, jumper, slot"
|
|
|
+ :total="total"
|
|
|
+ @update:current-page="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, reactive, nextTick, onBeforeMount, onUnmounted } from "vue";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
+import { Calendar } from "@element-plus/icons-vue";
|
|
|
+import vidiconsApi from "@/api/vidicons.js";
|
|
|
+import { dayjs } from "element-plus";
|
|
|
+import lodash from "lodash";
|
|
|
+import axios from "axios";
|
|
|
+import { useStore } from "vuex";
|
|
|
+const store = useStore();
|
|
|
+const router = useRouter();
|
|
|
+// 表格数据
|
|
|
+const tableData = reactive({ list: [] });
|
|
|
+const activeIndex = ref(); // 默认跳转路由
|
|
|
+const dialongTitle = ref("新增驾驶员"); // 弹窗标题
|
|
|
+const api = ref("");
|
|
|
+const searchInput = reactive({
|
|
|
+ name: "",
|
|
|
+ phone: "",
|
|
|
+ createTime: "",
|
|
|
+}); // 搜索按钮数据
|
|
|
+
|
|
|
+const currentPage = ref(1); // 当前页
|
|
|
+const pageSize = ref(10);
|
|
|
+const total = ref(); // 当前总数
|
|
|
+const selectData = reactive({ list: [] }); // 多选框选择的数据
|
|
|
+
|
|
|
+// 获取摄像头列表
|
|
|
+const getList = async (message) => {
|
|
|
+ let data = new FormData();
|
|
|
+ if (searchInput.createTime == null) {
|
|
|
+ searchInput.createTime = "";
|
|
|
+ }
|
|
|
+ data.set("user_name", searchInput.name);
|
|
|
+ data.set("user_phone", searchInput.phone);
|
|
|
+ data.set("create_time", searchInput.createTime); //前面的key记得对应!
|
|
|
+ data.set("page", currentPage.value);
|
|
|
+ data.set("rows", pageSize.value); //前面的key记得对应!
|
|
|
+ let res = await axios({
|
|
|
+ method: "post",
|
|
|
+ url: api.value + "/carBook/userlist.action",
|
|
|
+ headers: {
|
|
|
+ token: sessionStorage.getItem("token"),
|
|
|
+ },
|
|
|
+ data: data,
|
|
|
+ });
|
|
|
+ console.log(res);
|
|
|
+ if (res.status == 200) {
|
|
|
+ if (message) {
|
|
|
+ ElMessage({
|
|
|
+ type: "success",
|
|
|
+ showClose: true,
|
|
|
+ message: message,
|
|
|
+ center: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ tableData.list = res.data.rows;
|
|
|
+ total.value = res.data.total;
|
|
|
+ } else {
|
|
|
+ tableData.list = res.data.rows;
|
|
|
+ currentPage.value = 1;
|
|
|
+ total.value = res.data.total;
|
|
|
+ ElMessage({
|
|
|
+ type: "error",
|
|
|
+ showClose: true,
|
|
|
+ message: res.data.message,
|
|
|
+ center: true,
|
|
|
+ });
|
|
|
+ if (res.data.message == "token错误") {
|
|
|
+ router.push({
|
|
|
+ path: `/login`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 搜索功能
|
|
|
+const searchBtn = lodash.debounce(async () => {
|
|
|
+ getList("查询成功");
|
|
|
+}, 300);
|
|
|
+// 重置搜索
|
|
|
+const searchRefresh = lodash.debounce(async () => {
|
|
|
+ searchInput.name = "";
|
|
|
+ searchInput.phone = "";
|
|
|
+ searchInput.createTime = "";
|
|
|
+ currentPage.value = 1;
|
|
|
+ getList();
|
|
|
+}, 300);
|
|
|
+// 拒绝
|
|
|
+const edit = () => {
|
|
|
+ dialongTitle.value = "编辑优惠券";
|
|
|
+ addDialogVisible.value = true;
|
|
|
+ ruleForm.textarea = "";
|
|
|
+};
|
|
|
+const addCoupon = () => {
|
|
|
+ dialongTitle.value = "添加优惠券";
|
|
|
+ addDialogVisible.value = true;
|
|
|
+ ruleForm.textarea = "";
|
|
|
+};
|
|
|
+// 照片上传
|
|
|
+const pictureRemove = (uploadFile, uploadFiles) => {
|
|
|
+ console.log(uploadFile, uploadFiles);
|
|
|
+ ruleForm.picture = "";
|
|
|
+};
|
|
|
+// 限制上传图片的大小
|
|
|
+const beforeAvatarPicture = (rawFile) => {
|
|
|
+ console.log(rawFile, 33333);
|
|
|
+ if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
|
|
|
+ ElMessage.error("图片格式必须为JPG/PNG格式!");
|
|
|
+ return false;
|
|
|
+ } else if (rawFile.size / 1024 > 500) {
|
|
|
+ ElMessage.error("图片的大小不能超过500kb!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+const pictureImportChange = async (file, fileLists) => {
|
|
|
+ console.log(file, "1111");
|
|
|
+ // if (!beforeAvatarPicture(file.raw)) {
|
|
|
+ // // 如果 beforeAvatarPicture 返回了 false,直接退出
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // let srcImg = file.raw;
|
|
|
+ // let data = new FormData();
|
|
|
+ // data.set("file", srcImg);
|
|
|
+ // let res = await https.post(
|
|
|
+ // "/welcome/api/welcomeFile/uploadFile",
|
|
|
+ // "data",
|
|
|
+ // data
|
|
|
+ // );
|
|
|
+ // console.log(res, "导入照片");
|
|
|
+ // if (res.code == 200) {
|
|
|
+ // ruleForm.picture = res.data.url;
|
|
|
+ // ElMessage({
|
|
|
+ // type: "success",
|
|
|
+ // showClose: true,
|
|
|
+ // message: res.message,
|
|
|
+ // center: true,
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // ElMessage({
|
|
|
+ // type: "error",
|
|
|
+ // showClose: true,
|
|
|
+ // message: res.message,
|
|
|
+ // center: true,
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+};
|
|
|
+
|
|
|
+// 取消拒绝
|
|
|
+const cancelAdd = () => {
|
|
|
+ addDialogVisible.value = false;
|
|
|
+ ruleFormRef.value.resetFields();
|
|
|
+};
|
|
|
+// 确认添加员工
|
|
|
+const submitAdd = async (formEl) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ await formEl.validate(async (valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ let data = {
|
|
|
+ user_name: ruleForm.name,
|
|
|
+ user_phone: ruleForm.phone,
|
|
|
+ user_zz: ruleForm.post,
|
|
|
+ id: ruleForm.id,
|
|
|
+ };
|
|
|
+ let res = await axios({
|
|
|
+ method: "post",
|
|
|
+ url: api.value + "/carBook/userupdate.action",
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json;charset=utf-8",
|
|
|
+ token: sessionStorage.getItem("token"),
|
|
|
+ },
|
|
|
+ data: data,
|
|
|
+ });
|
|
|
+ // console.log(res, "修改账号");
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ getList();
|
|
|
+
|
|
|
+ ElMessage({
|
|
|
+ type: "success",
|
|
|
+ showClose: true,
|
|
|
+ message: res.data.message,
|
|
|
+ center: true,
|
|
|
+ });
|
|
|
+ addDialogVisible.value = false;
|
|
|
+ ruleFormRef.value.resetFields();
|
|
|
+ } else {
|
|
|
+ ElMessage({
|
|
|
+ type: "error",
|
|
|
+ showClose: true,
|
|
|
+ message: res.data.message,
|
|
|
+ center: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log("error submit!", fields);
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 赠送优惠券 --------------------------------------------------------
|
|
|
+const give = () => {
|
|
|
+ giveCouponTitle.value = "赠送优惠券";
|
|
|
+ giveCouponVisible.value = true;
|
|
|
+ ruleFormCoupon.textarea = "";
|
|
|
+};
|
|
|
+const cancelCoupon = () => {
|
|
|
+ giveCouponVisible.value = false;
|
|
|
+};
|
|
|
+const submitCoupon = () => {};
|
|
|
+// --------------------------------------------------------
|
|
|
+
|
|
|
+// 用户列表 =================================================================
|
|
|
+const userSelect = () => {
|
|
|
+ userListVisible.value = true;
|
|
|
+};
|
|
|
+const userListCancel = () => {
|
|
|
+ userListVisible.value = false;
|
|
|
+};
|
|
|
+// 分页
|
|
|
+const userCurrentChange = (value) => {
|
|
|
+ // console.log(value);
|
|
|
+ currentPageUser.value = value;
|
|
|
+};
|
|
|
+// =================================================================
|
|
|
+
|
|
|
+// 用户列表 ------------------------------------------------------------------
|
|
|
+const lookCoupon = () => {
|
|
|
+ lookVisible.value = true;
|
|
|
+};
|
|
|
+const lookCancel = () => {
|
|
|
+ lookVisible.value = false;
|
|
|
+};
|
|
|
+// 分页
|
|
|
+const lookCurrentChange = (value) => {
|
|
|
+ // console.log(value);
|
|
|
+ currentPageLook.value = value;
|
|
|
+};
|
|
|
+// ------------------------------------------------------------------
|
|
|
+
|
|
|
+// 删除 --------------------------------------------------------
|
|
|
+const pass = (row) => {
|
|
|
+ ElMessageBox.confirm(`是否删除此优惠券`, "提示", {
|
|
|
+ confirmButtonText: "确认",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ // let data = new FormData();
|
|
|
+ // data.set("id", row.id);
|
|
|
+ // let res = await axios({
|
|
|
+ // method: "post",
|
|
|
+ // url: api.value + "/carBook/userdel.action",
|
|
|
+ // headers: {
|
|
|
+ // token: sessionStorage.getItem("token"),
|
|
|
+ // },
|
|
|
+ // data: data,
|
|
|
+ // });
|
|
|
+ // if (res.data.code == 200) {
|
|
|
+ // if (tableData.list.length == 1 && currentPage.value != 1) {
|
|
|
+ // currentPage.value = currentPage.value - 1;
|
|
|
+ // }
|
|
|
+ // getList();
|
|
|
+ // ElMessage({
|
|
|
+ // type: "success",
|
|
|
+ // showClose: true,
|
|
|
+ // message: res.data.message,
|
|
|
+ // center: true,
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // ElMessage({
|
|
|
+ // type: "error",
|
|
|
+ // showClose: true,
|
|
|
+ // message: res.data.message,
|
|
|
+ // center: true,
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
+
|
|
|
+// 表格斑马纹颜色修改
|
|
|
+const tableRowClassName = ({ row, rowIndex }) => {
|
|
|
+ if (rowIndex % 2 === 0) {
|
|
|
+ return "even";
|
|
|
+ } else if (rowIndex % 2 !== 0) {
|
|
|
+ return "odd";
|
|
|
+ }
|
|
|
+ return "";
|
|
|
+};
|
|
|
+// 分页
|
|
|
+const handleCurrentChange = (value) => {
|
|
|
+ // console.log(value);
|
|
|
+ currentPage.value = value;
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+onBeforeMount(() => {
|
|
|
+ api.value = store.state.user.api;
|
|
|
+ getList();
|
|
|
+});
|
|
|
+onUnmounted(() => {
|
|
|
+ // document.removeEventListener("keyup", Enters);
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.content-box {
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ height: calc(100% - 105px);
|
|
|
+ margin: 20px auto;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 60px;
|
|
|
+ margin: 0 30px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ color: #000;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ .camera {
|
|
|
+ margin-right: 15px;
|
|
|
+ color: #4392f7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .middle {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ color: #000;
|
|
|
+ // border-bottom: 1px solid rgb(231, 231, 231);
|
|
|
+ .filter {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ .search {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ }
|
|
|
+ .condition {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px 30px 10px 0;
|
|
|
+ :deep(.el-input .el-input__inner) {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin: 0 10px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .gongneng {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ :deep(.cont) {
|
|
|
+ width: 60%;
|
|
|
+ margin: 20px auto;
|
|
|
+ }
|
|
|
+ :deep(.download) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
+ :deep(.download span) {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ :deep(.cont .el-button) {
|
|
|
+ margin-left: 60px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.cont .accomplish) {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ :deep(.cont .accomplish .el-button) {
|
|
|
+ width: 50%;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ flex: 1;
|
|
|
+ margin: 10px auto;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .el-table--fit {
|
|
|
+ height: 100%;
|
|
|
+ :deep(.el-table__header-wrapper) {
|
|
|
+ background-color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ :deep(.el-table__row) {
|
|
|
+ height: 50px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ :deep(.el-table__row td) {
|
|
|
+ padding: 0;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--primary {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ :deep(.el-table__body .even) {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ :deep(.el-table__body .odd) {
|
|
|
+ background-color: rgba(240, 243, 247, 1);
|
|
|
+ }
|
|
|
+ :deep(.look) {
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 45px;
|
|
|
+ border: 0.74px solid rgba(30, 125, 251, 1);
|
|
|
+ }
|
|
|
+ :deep(.looks) {
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 45px;
|
|
|
+ border: 0.74px solid #f56c6c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-pagination {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ height: 60px;
|
|
|
+ margin: 0 auto;
|
|
|
+ justify-content: flex-end;
|
|
|
+ :deep(.el-pagination__total) {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ :deep(.el-pagination__goto) {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ :deep(.el-pagination__classifier) {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ :deep(.el-input__wrapper) {
|
|
|
+ border: 1px solid rgba(0, 0, 0, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ :deep(.el-pager li) {
|
|
|
+ margin: 0 5px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ :deep(.el-pager li.is-active) {
|
|
|
+ background-color: rgba(30, 125, 251, 1);
|
|
|
+ }
|
|
|
+ :deep(.btn-prev) {
|
|
|
+ margin-right: 5px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ :deep(.btn-next) {
|
|
|
+ margin-left: 5px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-input {
|
|
|
+ width: 192px;
|
|
|
+}
|
|
|
+</style>
|