123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818 |
- <template>
- <div class="m-container">
- <!-- <h2>
- <el-page-header @back="onCancel" :content="'老师' + (pageType == 'create' ? '新增' : '修改')"></el-page-header>
- </h2>-->
- <div class="infoWrap">
- <div class="left">
- <h4>基本信息</h4>
- <el-form :model="topForm" :rules="rules" ref="form">
- <el-row>
- <el-col :span="12">
- <el-form-item
- label="姓名"
- prop="realName"
- :label-width="formLabelWidth"
- >
- <el-input v-model.trim="topForm.realName"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="姓名(备注)" :label-width="formLabelWidth">
- <el-input v-model.trim="topForm.memo"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item
- label="性别"
- prop="gender"
- :label-width="formLabelWidth"
- >
- <el-select v-model.trim="topForm.gender">
- <el-option label="男" :value="1"></el-option>
- <el-option label="女" :value="0"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="出生日期" :label-width="formLabelWidth">
- <el-date-picker
- v-model.trim="topForm.birthdate"
- type="date"
- :picker-options="{
- firstDayOfWeek: 1,
- }"
- value-format="yyyy-MM-dd"
- placeholder="出生日期"
- ></el-date-picker>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item
- label="入职日期"
- prop="entryDate"
- :label-width="formLabelWidth"
- >
- <el-date-picker
- v-model.trim="topForm.entryDate"
- type="date"
- :picker-options="pickerOptions2"
- value-format="yyyy-MM-dd"
- placeholder="入职日期"
- ></el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item
- label="工作类型"
- prop="jobNature"
- :label-width="formLabelWidth"
- >
- <el-select
- v-model.trim="topForm.jobNature"
- placeholder="工作类型"
- clearable
- filterable
- >
- <el-option
- v-for="item in jobNature"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item
- label="所属分部"
- prop="organId"
- :label-width="formLabelWidth"
- >
- <el-select
- v-model.trim="topForm.organId"
- filterable
- clearable
- placeholder="所属分部"
- @change="switchOrgan"
- >
- <el-option
- v-for="item in branchList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="流动范围" :label-width="formLabelWidth">
- <el-select
- v-model.trim="topForm.flowOrganRange"
- filterable
- clearable
- multiple
- placeholder="流动范围"
- >
- <el-option
- v-for="item in branchList"
- :key="item.value"
- :label="item.label"
- :value="item.value.toString()"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item
- label="员工状态"
- prop="isProbationPeriod"
- :label-width="formLabelWidth"
- >
- <el-select
- v-model.trim="topForm.isProbationPeriod"
- clearable
- filterable
- placeholder="员工状态"
- >
- <el-option v-for="item in ProbationPeriodList" :key="item.value" :label="item.label" :value="Number(item.value)"></el-option>
- <!-- <el-option label="正式" :value="0"></el-option>
- <el-option label="试用" :value="1"></el-option>
- <el-option label="实习" :value="3"></el-option> -->
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12" v-if="pageType == 'update'">
- <el-form-item label="教学点" :label-width="formLabelWidth">
- <el-input disabled v-model.trim="teacherSchools"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="老师简介" :label-width="formLabelWidth">
- <el-input
- type="textarea"
- v-model.trim="topForm.introduction"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12" class="diSpan">
- <el-tooltip placement="top" popper-class="mTooltip">
- <div slot="content">
- 「是」此老师可作为网管课老师;
- <br />「否」此老师不可作为网管课老师;
- </div>
- <!-- <img :src="imageIcon" class="micon el-tooltip" style="width:8px height:8px" alt /> -->
- <i
- class="el-icon-question micon el-tooltip"
- style="font-size: 18px; color: #f56c6c"
- ></i>
- </el-tooltip>
- <el-form-item label="开放陪练" label-width="90px" class="course">
- <el-select
- v-model.trim="topForm.isSupportExtraPracticeLesson"
- clearable
- filterable
- placeholder="开放陪练"
- >
- <el-option label="是" :value="true"></el-option>
- <el-option label="否" :value="false"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <h4>资料学历</h4>
- <el-row>
- <el-col :span="12">
- <!-- :rules="[{ required: true, message: '手机号不能为空',trigger: 'blur'},{pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号',trigger: 'blur' }]" -->
- <el-form-item
- label="手机号"
- prop="phone"
- :label-width="formLabelWidth"
- >
- <el-input v-model.trim.number="topForm.phone"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="毕业学校" :label-width="formLabelWidth">
- <el-input v-model.trim="topForm.graduateSchool"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="电子邮箱" :label-width="formLabelWidth">
- <el-input v-model.trim="topForm.email"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="最高学历" :label-width="formLabelWidth">
- <!-- <el-input v-model.trim="topForm.educationBackground"></el-input> -->
- <el-select
- v-model.trim="topForm.educationBackground"
- clearable
- filterable
- placeholder="最高学历"
- >
- <el-option label="初中" value="初中"></el-option>
- <el-option label="高中" value="高中"></el-option>
- <el-option label="大专" value="大专"></el-option>
- <el-option label="本科" value="本科"></el-option>
- <el-option label="硕士" value="硕士"></el-option>
- <el-option label="博士" value="博士"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item
- label="专业技能"
- :rules="[{ required: true }]"
- :label-width="formLabelWidth"
- >
- <el-select
- :disabled="!topForm.organId"
- v-model="subjectIds"
- clearable
- placeholder="专业技能"
- multiple
- >
- <el-option
- v-for="item in subjectList"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="职称" :label-width="formLabelWidth">
- <el-input v-model.trim="topForm.technicalTitles"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="证件类型" :label-width="formLabelWidth">
- <el-input v-model.trim="topForm.certificateType"></el-input>
- <!-- <el-select v-model.trim="topForm.certificateType" placeholder="证件类型">
- <el-option label="身份证" value="身份证"></el-option>
- <el-option label="护照" value="护照"></el-option>
- <el-option label="港澳通行证" value="港澳通行证"></el-option>
- </el-select>-->
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="证件号码" :label-width="formLabelWidth">
- <el-input v-model.trim="topForm.certificateNum"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="转正日期" :label-width="formLabelWidth">
- <el-date-picker
- v-model="topForm.formalStaffDate"
- value-format="yyyy-MM-dd"
- type="date"
- placeholder="选择转正日期"
- :picker-options="pickerOptions"
- >
- </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="离职日期" :label-width="formLabelWidth">
- <el-date-picker
- v-model="topForm.demissionDate"
- value-format="yyyy-MM-dd"
- type="date"
- placeholder="选择离职日期"
- >
- </el-date-picker>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label :label-width="formLabelWidth">
- <!-- <el-input v-model.trim="topForm.certificateType"></el-input> -->
- <el-checkbox
- v-model.trim="topForm.isSupportCourseScheduleRewardsRules"
- >适用VIP分部活动</el-checkbox
- >
- </el-form-item>
- </el-col>
- </el-row>
- <el-form-item>
- <el-button @click="onSubmit('form')" type="primary"
- >立即{{ pageType == "create" ? "创建" : "修改" }}</el-button
- >
- <el-button @click="onReSet('form')">重置</el-button>
- </el-form-item>
- </el-form>
- </div>
- <div class="right">
- <div class="teacherIcon">
- <img v-if="topForm.avatar" key="avatar" :src="topForm.avatar" alt />
- <img v-else key="avatar" src="@/assets/images/base/woman.png" alt />
- </div>
- <el-upload
- class="ivu-upload"
- :show-upload-list="false"
- :show-file-list="false"
- :headers="headers"
- :on-success="handleSuccess"
- accept=".jpg, .jpeg, .png, .gif"
- :max-size="2048"
- multiple
- action="/api-web/uploadFile"
- >
- <el-button
- icon="ios-cloud-upload-outline"
- v-if="pageType != 'create'"
- v-permission="{
- child: 'resetTeacher/uploadFile',
- parent: '/teacherUpdate/baseInfo',
- }"
- >修改头像</el-button
- >
- <el-button
- icon="ios-cloud-upload-outline"
- v-if="pageType == 'create'"
- v-permission="{
- child: 'createTeacher/uploadFile',
- parent: '/teacherAdd/baseInfo',
- }"
- >新增头像</el-button
- >
- </el-upload>
- <p class="iconP">
- 推荐图片尺寸:200x200;
- <br />支持的格式:jpg,jpeg,png,gif;
- <br />*头像修改后,需要点击页面 <br />下方「立即修改」保存生效;
- </p>
- </div>
- </div>
- </div>
- </template>
- <script>
- // import { queryByOrganId } from '@/api/systemManage'
- import { getToken } from "@/utils/auth";
- import { branchQueryPage, subjectListTree } from "@/api/specialSetting";
- import { teacherAdd, teacherUpdate, teacherGet } from "@/api/teacherManager";
- import { getSubject } from "@/api/buildTeam";
- import store from "@/store";
- import { permission } from "@/utils/directivePage";
- import { jobNature, ProbationPeriodList } from "@/utils/searchArray";
- import { isvalidPhone } from "@/utils/validate";
- import dayjs from 'dayjs'
- let validPhone = (rule, value, callback) => {
- if (!value) {
- callback(new Error("请输入电话号码"));
- } else if (!isvalidPhone(value)) {
- callback(new Error("请输入正确的11位手机号码"));
- } else {
- callback();
- }
- };
- export default {
- name: "teacherOperation",
- data() {
- const that = this
- return {
- headers: {
- Authorization: getToken(),
- },
- jobNature: jobNature,
- ProbationPeriodList: ProbationPeriodList,
- organId: null,
- pageType: this.$route.query.type,
- teacherId: this.$route.query.teacherId,
- formLabelWidth: "80px",
- branchList: [], // 分部列表
- subjectList: [], //声部列表 // 多选声部列表
- teacherSchools: null,
- topForm: {
- realName: null,
- gender: null,
- birthdate: null,
- entryDate: null,
- jobNature: null,
- organId: null,
- flowOrganRange: null,
- introduction: null,
- phone: null,
- avatar: null,
- graduateSchool: null,
- email: null,
- educationBackground: null,
- demissionDate:null,
- formalStaffDate: null,
- isProbationPeriod: null,
- technicalTitles: null,
- certificateType: null,
- certificateNum: null,
- isSupportCourseScheduleRewardsRules: true,
- isSupportExtraPracticeLesson: null,
- memo: null,
- },
- subjectIds: [],
- tenantId: null,
- // imageIcon: require("@/assets/images/base/warning.png"),
- rules: {
- realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
- gender: [{ required: true, message: "请选择性别", trigger: "change" }],
- entryDate: [
- { required: true, message: "请选择入职日期", trigger: "change" },
- ],
- jobNature: [
- { required: true, message: "请选择工作类型", trigger: "change" },
- ],
- isProbationPeriod: [
- { required: true, message: "请选择员工状态", trigger: "change" },
- ],
- organId: [
- { required: true, message: "请选择所属分部", trigger: "change" },
- ],
- phone: [{ required: true, validator: validPhone, trigger: "blur" }],
- subjectIds: [
- {
- required: true,
- type: "array",
- message: "请选择专业技能",
- trigger: "change",
- },
- ],
- isAvatar: null,
- },
- pickerOptions2: {
- firstDayOfWeek: 1,
- disabledDate(time) {
- let date = new Date(dayjs(that.topForm.formalStaffDate).format('YYYY-MM-DD') + ' 00:00:00')
- return that.topForm.formalStaffDate ? time.getTime() > date.getTime() : false;
- }
- },
- pickerOptions: {
- firstDayOfWeek: 1,
- disabledDate(time) {
- let date = new Date(dayjs(that.topForm.entryDate).format('YYYY-MM-DD') + ' 00:00:00')
- return that.topForm.entryDate ? date.getTime() > time.getTime() : false;
- }
- }
- };
- },
- created() {},
- mounted() {
- this.pageType = this.$route.query.type;
- this.teacherId = this.$route.query.teacherId;
- this.__init();
- },
- // activated() {
- // this.pageType = this.$route.query.type;
- // this.teacherId = this.$route.query.teacherId;
- // this.__init();
- // },
- methods: {
- __init() {
- if (this.$route.query.search) {
- this.Fsearch = this.$route.query.search;
- }
- if (this.$route.query.rules) {
- this.Frules = this.$route.query.rules;
- }
- // isAvatar
- branchQueryPage({
- // 获取分部
- delFlag: 0,
- rows: 9999,
- }).then((res) => {
- if (res.code == 200 && res.data && res.data.rows) {
- this.branchList = [];
- res.data.rows.forEach((item) => {
- this.branchList.push({
- label: item.name,
- value: item.id,
- });
- });
- }
- });
- if (this.pageType == "update") {
- teacherGet({ teacherId: this.teacherId }).then((res) => {
- if (res.code == 200) {
- let result = res.data;
- this.topForm = {
- realName: result.realName,
- gender: result.gender,
- birthdate: result.birthdate,
- entryDate: result.entryDate,
- jobNature: result.jobNature,
- organId: result.teacherOrganId ? result.teacherOrganId : null,
- flowOrganRange: result.flowOrganRangeId
- ? result.flowOrganRangeId.split(",")
- : null,
- introduction: result.introduction,
- phone: result.phone,
- avatar: result.avatar,
- graduateSchool: result.graduateSchool,
- email: result.email,
- educationBackground: result.educationBackground,
- demissionDate:result.demissionDate,
- formalStaffDate: result.formalStaffDate,
- technicalTitles: result.technicalTitles,
- certificateType: result.certificateType,
- certificateNum: result.certificateNum,
- isProbationPeriod: result.isProbationPeriod,
- isSupportCourseScheduleRewardsRules:
- result.isSupportCourseScheduleRewardsRules,
- isSupportExtraPracticeLesson: result.isSupportExtraPracticeLesson,
- memo: result.memo,
- };
- let sn = [];
- result.teacherSchools.forEach((item) => {
- sn.push(item.name);
- });
- if (result.subjectId) {
- let arr = result.subjectId.split(",");
- this.subjectIds = arr.map((item) => {
- return parseInt(item);
- });
- }
- this.teacherSchools = this.joinArray(sn, ","); // 教学点
- this.switchOrgan();
- }
- });
- }
- },
- // pickerOptions() {
- // return {
- // disabledDate(time) {
- // let date = new Date(this.topForm.entryDate)
- // return time.getTime() > date.now();
- // }
- // }
- // },
- joinArray(value, type) {
- if (!type) {
- type = " ";
- }
- if (typeof value == "object" && value != null) {
- return value.join(type);
- } else {
- return value;
- }
- },
- onSubmit(formName) {
- this.$refs[formName].validate((valid) => {
- if (valid) {
- if (this.subjectIds.length <= 0) {
- this.$message.error("请选择专业技能");
- return;
- }
- if (this.topForm.flowOrganRange instanceof Array) {
- this.topForm.flowOrganRange = this.topForm.flowOrganRange
- ? this.topForm.flowOrganRange.join(",")
- : null;
- }
- this.subjectId = this.subjectIds.join(",");
- this.topForm.subjectId = this.subjectId;
- if (this.pageType == "update") {
- this.topForm.id = this.teacherId;
- teacherUpdate(this.topForm).then((res) => {
- if (res.code == 200) {
- // this.$emit('onTeacher')
- this.$store.dispatch('delVisitedViews', this.$route)
- this.$router.push({
- path: "/business/teacherList",
- query: { rules: this.Frules, search: this.Fsearch },
- });
- }
- this.messageTips("修改", res);
- });
- } else if (this.pageType == "create") {
- if (this.topForm.id) {
- delete this.topForm.id;
- }
- teacherAdd(this.topForm).then((res) => {
- if (res.code == 200) {
- // 权限判断,是否有课酬设置
- if (permission("/teacherAdd/salarySeting")) {
- this.$emit("onTeacher", res.data);
- } else {
- this.$store.dispatch('delVisitedViews', this.$route)
- this.$router.push({
- path: "/business/teacherList",
- query: { rules: this.Frules, search: this.Fsearch },
- });
- }
- }
- this.messageTips("添加", res);
- });
- }
- } else {
- this.$nextTick(() => {
- let isError = document.getElementsByClassName('is-error')
- isError[0].scrollIntoView({
- // 滚动到指定节点
- // 值有start,center,end,nearest,当前显示在视图区域中间
- block: 'center',
- // 值有auto、instant,smooth,缓动动画(当前是慢速的)
- behavior: 'smooth',
- })
- })
- return false;
- }
- });
- },
- messageTips(title, res) {
- if (res.code == 200) {
- this.$message.success(title + "成功");
- } else {
- this.topForm.subjectIds = this.topForm.subjectIds.split(",");
- this.$message.error(res.msg);
- }
- },
- onReSet(formName) {
- this.topForm = {
- realName: null,
- gender: null,
- birthdate: null,
- entryDate: null,
- jobNature: null,
- organId: null,
- flowOrganRange: null,
- introduction: null,
- phone: null,
- avatar: null,
- graduateSchool: null,
- email: null,
- educationBackground: null,
- demissionDate: null,
- formalStaffDate: null,
- subjectIds: [],
- technicalTitles: null,
- certificateType: null,
- certificateNum: null,
- jobType: "ADVISER",
- memo: null
- };
- this.subjectIds = []
- this.$refs[formName].resetFields();
- },
- onCancel() {
- this.$store.dispatch('delVisitedViews', this.$route)
- this.$router.push({
- path: "/business/teacherList",
- query: { rules: this.Frules, search: this.Fsearch },
- });
- },
- handleSuccess(res) {
- // 获取富文本组件实例
- // let quill = this.editor
- // 如果上传成功
- if (res.code == 200) {
- // 获取光标所在位置
- this.topForm.avatar = res.data.url;
- }
- },
- // 选择分部
- switchOrgan() {
- if (this.topForm.organId == 43) {
- this.tenantId = 2;
- } else {
- this.tenantId = 1;
- }
- getSubject({ tenantId: this.tenantId }).then((res) => {
- if (res.code == 200) {
- this.subjectList = res.data;
- }
- });
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
- border-top-color: #ecf0f0;
- color: #666666;
- }
- .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
- border-top-color: #ecf0f0;
- color: #666666;
- }
- .atooltip {
- background: #ecf0f0 !important;
- color: #666666;
- }
- .diSpan {
- position: relative;
- .micon {
- position: absolute;
- top: 12px;
- left: 64px;
- }
- }
- .course {
- /deep/.el-form-item__label {
- text-align: left !important;
- }
- }
- // /deep/.el-tooltip__popper.is-dark {
- // background-color: #ECF0F0!important;
- // color: #666!important;
- // }
- .el-button--primary {
- background: #14928a;
- border-color: #14928a;
- color: #fff;
- &:hover,
- &:active,
- &:focus {
- background: #14928a;
- border-color: #14928a;
- color: #fff;
- }
- }
- /deep/.el-date-editor.el-input,
- /deep/.el-select {
- width: 100% !important;
- }
- // .el-row {
- // margin-top: 40px;
- // }
- // .el-col {
- // display: flex;
- // align-items: center;
- // margin-bottom: 20px;
- // justify-content: flex-end;
- // margin-right: 50%;
- // }
- // .el-input-group {
- // width: 200px;
- // margin: 0 20px;
- // }
- // /deep/.el-tree-node__content {
- // height: 40px !important;
- // }
- /deep/.el-form-item__content {
- font-size: 14px !important;
- margin-right: 5%;
- }
- .infoWrap {
- margin-top: 20px;
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- .left {
- max-width: 1000px;
- width: 100%;
- h4 {
- margin-bottom: 20px;
- }
- }
- .right {
- margin-left: 100px;
- display: flex;
- flex-direction: column;
- align-items: center;
- .teacherIcon {
- width: 150px;
- height: 150px;
- // border: 1px solid #444;
- border-radius: 50%;
- overflow: hidden;
- margin-bottom: 20px;
- img {
- width: 150px;
- height: 150px;
- object-fit: cover;
- }
- }
- }
- .iconP {
- margin-top: 10px;
- font-size: 14px;
- color: red;
- width: 260px;
- text-align: center;
- }
- }
- </style>
|