123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631 |
- <template>
- <div>
- <div class="autoBox box">
- <div class="crumbs">
- <el-breadcrumb separator="/" replace>
- <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
- <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile' }">{{$t('common.CooperationNetwork')}}</el-breadcrumb-item>
- <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile?key=union' }">{{$t('common.AllianceIntroduction')}}</el-breadcrumb-item>
- <el-breadcrumb-item >{{$t('common.Membershipapplicationinformation')}}</el-breadcrumb-item>
- </el-breadcrumb>
- <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0">
- <span class="cursor" :class="screenIndex==index?'screen1':'screen2'" @click="realTimeInfoScreen(item,item.value)" v-for="(item,index) in realTimeInfoScreens2">
- {{$t(item.lable)}}
- </span>
- </el-breadcrumb>
- <div >
- <div style="width: 80%;margin: auto;margin-top: 20px;">
- <div style="width: 100%;text-align: center;font-size: 27px;color:#2C2F32;">{{$t('common.Applicationformembership')}}</div>
- </div>
- <div style="margin-top: 50px;width: 100%;">
- <el-steps :active="active" align-center>
- <el-step :title="$t('common.Applytojoin')" ></el-step>
- <el-step :title="$t('common.Fillintheinformation')" ></el-step>
- <el-step :title="$t('common.Sealandsubmit')" :description="'(' + $t('common.Printanduploadwithcompanyseal1') + ')'"></el-step>
- <el-step :title="$t('common.Preliminaryreview')" ></el-step>
- <el-step :title="$t('common.CooperativeOrganizationReview')"
- :description="'('+ $t('common.Submissionforconsideration')+ ')'">
- </el-step>
- <el-step :title="$t('common.SendthenoticeofjoiningtheLeague')" >
- </el-step>
- <el-step :title="$t('common.complete')"></el-step>
- </el-steps>
- </div>
- <div style="width: 100%;margin: auto;margin-top: 20px;">
- <el-collapse v-model="activeNames" >
- <!-- 全球能源互联网 -->
- <el-collapse-item name="3" v-if="active==1">
- <template slot="title">
- <span style="font-size: 15px!important;">{{$t('common.GlobalenergyInternetprofessionalalliance')}}</span> {{ '(' + $t('common.Multiplechoicesareavailable') + ')'}}
- </template>
- <el-checkbox-group v-model="leagueType" style="margin-left: 100px;margin-top: 20px;width: 815px;">
- <el-checkbox :key="item.baseEntityId" :label="item.baseEntityId" v-for="(item,index) in baseLeagueInfos">{{$i18n.locale=='zh'?'全球能源互联网'+item.leagueName:'Global Energy Internet '+item.leagueName}}</el-checkbox>
- <div style="height: 50px;font-size: 14px;margin-top: -10px;margin-left: 24px;">
- <a href="javascript:;" style="color: #32A0F5;" @click="toNewView('IntroductionMemberProfile','union')">
- {{$t('common.LearnmoreaboutglobalenergyInternetprofessionalalliance')}}
- </a>
- </div>
- </el-checkbox-group>
- </el-collapse-item>
- <!-- 申请单位基本信息 -->
- <el-collapse-item name="1" v-if="active==1">
- <template slot="title">
- <span style="color: red;margin-right: 3px;">* </span> {{$t('common.Basicinformationofapplicant')}}
- </template>
- <el-form ref="form" :model="baseLeagueApply" :rules="form1Rules" label-width="260px" class="demo-ruleForm"
- style="margin-top: 20px;width: 1000px;">
- <!-- 国别 -->
- <el-form-item :label="$t('common.Country')" prop='unitCountryDict'>
- <el-select
- :no-match-text="$i18n.locale=='zh'?'无匹配数据':'No Data'"
- filterable
- v-model="baseLeagueApply.unitCountryDict"
- :placeholder="$t('common.PleaseSelect')+$t('common.Country')"
- style="width: 70%;">
- <el-option :label="item.countryName" :value="item.countryIsoCode"
- v-for="(item,index) in countryList">
- </el-option>
- </el-select>
- </el-form-item>
- <!-- 单位中文全称 -->
- <el-form-item :label="$t('common.NameoftheEntity')" prop='unitZhName'>
- <el-input show-word-limit maxlength="100" v-model="baseLeagueApply.unitZhName" style="width: 70%;" :placeholder="$t('common.PleaseEnter')+$t('common.NameoftheEntity')"></el-input>
- </el-form-item>
- <!-- 单位英文全称 -->
- <el-form-item :label="$t('common.FullEnglishnameofunit')" prop='unitEnName' style="display: block;">
- <el-input show-word-limit maxlength="100" v-model="baseLeagueApply.unitEnName"
- style="width: 70%;" :placeholder="this.$t('common.PleaseEnter')+$t('common.FullEnglishnameofunit')">
- </el-input>
- </el-form-item>
- <el-form-item :label="$t('common.OfficialWebsite')" prop='unitWebsite'>
- <el-input show-word-limit maxlength="100" v-model="baseLeagueApply.unitWebsite" style="width: 70%;" :placeholder="$t('common.PleaseEnter')+$t('common.OfficialWebsite')"></el-input>
- </el-form-item>
- <!-- 单位地址 -->
- <el-form-item :label="$t('common.Unitaddress')" prop='unitAddress'>
- <el-input show-word-limit maxlength="1000" v-model="baseLeagueApply.unitAddress" style="width: 70%;" :placeholder="$t('common.PleaseEnter')+$t('common.Unitaddress')"></el-input>
- </el-form-item>
- <!-- 邮政编码 -->
- <el-form-item :label="$t('common.PostalCode')" prop='postalCode'>
- <el-input show-word-limit maxlength="60" v-model="baseLeagueApply.postalCode" style="width: 70%;" :placeholder="$t('common.PleaseEnter')+$t('common.PostalCode')"></el-input>
- </el-form-item>
- <!-- 法定代表人 -->
- <el-form-item :label="$t('common.LegalRepresentative')" prop='corporateName'>
- <el-input show-word-limit maxlength="60" v-model="baseLeagueApply.corporateName" style="width: 70%;" :placeholder="$t('common.PleaseEnter')+$t('common.LegalRepresentative')"></el-input>
- </el-form-item>
- <el-form-item :label="$t('common.BriefIntroductionOfApplicant')" prop='unitIntroduction'>
- <el-input
- type="textarea"
- :rows="2"
- :placeholder="$t('common.Pleaseinputthecompanyprofileregistered')"
- v-model="baseLeagueApply.unitIntroduction">
- </el-input>
- </el-form-item>
- </el-form>
- </el-collapse-item>
- <!-- 联系人基本信息 -->
- <el-collapse-item name="2" v-if="active==1">
- <template slot="title">
- <span style="color: red;margin-right: 3px;">* </span> {{$t('common.Contactbasicinformation')}}
- </template>
- <el-form ref="form2" :inline="true" :model="baseContactsInfo" :rules="rules" label-width="200px" class="demo-ruleForm" style="margin-top: 20px;width: 1000px;">
- <!-- 姓名 -->
- <el-form-item :label="$t('common.fullName')" prop='contactsName'>
- <el-input show-word-limit maxlength="60" v-model="baseContactsInfo.contactsName"
- style="width: 120%;" :placeholder="$t('common.PleaseEnter')+$t('common.fullName')">
- </el-input>
- </el-form-item>
- <!-- 所在部门 -->
- <el-form-item :label="$t('common.Department')">
- <el-input show-word-limit maxlength="20" v-model="baseContactsInfo.depart"
- style="width: 120%;" :placeholder="$t('common.PleaseEnter')+$t('common.Department')">
- </el-input>
- </el-form-item>
- <!-- 职务 -->
- <el-form-item :label="$t('common.Position')" prop='currentDuty'>
- <el-input show-word-limit maxlength="100" v-model="baseContactsInfo.currentDuty"
- style="width: 120%;" :placeholder="$t('common.PleaseEnter')+$t('common.Position')">
- </el-input>
- </el-form-item>
- <!-- 联系电话 -->
- <el-form-item :label="$t('common.ContactPhoneNumber')" prop='telephoneNumber'>
- <el-input show-word-limit maxlength="100" v-model="baseContactsInfo.telephoneNumber"
- style="width: 120%;" :placeholder="$t('common.PleaseEnter')+$t('common.ContactPhoneNumber')">
- </el-input>
- </el-form-item>
- <!-- 电子邮箱 -->
- <el-form-item :label="$t('common.Emails')" prop='email'>
- <el-input show-word-limit maxlength="40" v-model="baseContactsInfo.email"
- style="width: 120%;" :placeholder="$t('common.PleaseEnter')+$t('common.Email')">
- </el-input>
- </el-form-item>
- <!-- 传真 -->
- <el-form-item :label="$t('common.Fax')" prop='Fax'>
- <el-input show-word-limit maxlength="20" v-model="baseContactsInfo.faxNumber"
- style="width: 120%;" :placeholder="$t('common.PleaseEnter')+$t('common.Fax')">
- </el-input>
- </el-form-item>
- </el-form>
- </el-collapse-item>
- <div style="text-align: center;margin-top: 50px;" v-if="active!==1">{{$t('common.AlreadySubmit')}}<span @click="toViewCenter('myConcerns','2')" style="color: #409eff;" class="cursor">{{$t('common.UserCenterMyApplication')}}</span> {{$t('common.UpdateInfoAndUpload')}}</div>
- </el-collapse>
- </div>
- <!-- 按钮 -->
- <div style="width: 80%;margin: auto;margin-top: 50px;height: 100px;">
- <el-button style="margin-left: 200px;width: 150px;height: 40px;"
- v-if="active==1" class="button_409EFF"
- @click="realTimeInfoScreen(null,'union')">
- {{$t('common.cancel')}}
- </el-button>
- <el-button
- style="margin-left: 10px;width: 150px;height: 40px;"
- v-if="active==1"
- class="button_409EFF"
- @click="dialogVisible=true">
- {{$t('common.preview')}}
- </el-button>
- <el-button
- style="margin-left: 10px;width: 150px;height: 40px;"
- type="primary"
- @click="submitForm"
- v-if="active==1">
- {{$t('common.SubmitAndDownload')}}
- </el-button>
- </div>
- <el-dialog
- :title="$i18n.locale === 'zh'?'文件在线预览':'File Online Preview'"
- :visible.sync="dialogVisible"
- width="595px"
- height="842px">
- <template>
- <userCenterTaberListUnionPrint :form="baseLeagueApply" :form2="baseContactsInfo" ></userCenterTaberListUnionPrint>
- </template>
- </el-dialog>
- <div class="row" style="padding-top: 55px;background-color:#fff;display: none;" ref="imgDom">
- <!-- 申请单位基本信息form 联系人基本信息form2 -->
- <userCenterTaberListUnionPrint :form="baseLeagueApply" :form2="baseContactsInfo" ></userCenterTaberListUnionPrint>
- </div>
-
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import {submitApplyPortal,getBaseLeagueApplys} from '@/api/cooperation/baseLeagueApply'
- import {getBaseLeagues} from '@/api/cooperation/baseLeagueEntity'
- import {country} from '@/api/country'
- import Base from '@/views/base/Base'
- import userCenterTaberListUnionPrint from '@/views/userCenter/userCenterItem/userCenterTaberListUnionPrint'
- export default {
- name: 'IntroductionApplicationMembership',
- extends: Base,
- components:{userCenterTaberListUnionPrint},
- data () {
- return {
- active:1,
- activeNames: ['1','2','3'],
- countryList:[],
- screenIndex: null,
- baseLeagueInfos:[],
- realTimeInfoScreens2:[{
- lable:"common.MemberIntroduction",
- value:'member'
- },{
- lable:"common.CooperativeUnitIntroduction",
- value:'cooperation'
- },{
- lable:"common.CustomizedService",
- value:'custom'
- }],
- dialogVisible:false,
- leagueType:[],
- baseLeagueApply: {
- id: null,
- userId: '',
- leagueName: '',
- leagueId: '',
- unitId: '',
- unitZhName: '',
- unitEnName: '',
- unitCountry: '',
- unitCountryDict: '',
- corporateName: '',
- unitAddress: '',
- postalCode: '',
- unitWebsite: '',
- unitIntroduction: '',
- linkName: '',
- linkDuty: '',
- linkDept: '',
- linkPhoneNumber: '',
- linkEmail: '',
- linkFaxNumber: '',
- area: '',
- areaDict: '',
- leagueApplyDate: '',
- subName: '',
- subAccount: '',
- subCompany: '',
- subMail: '',
- subPhone: '',
- status: '',
- statusDict: '',
- phase: '',
- phaseDict: '1',
- firstApprovalUser: '',
- firstApprovalResult: '',
- firstApprovalComment: '',
- firstApprovalTime: '',
- secondApprovalUser: '',
- secondApprovalResult: '',
- secondApprovalComment: '',
- secondApprovalTime: '',
- auditUser: '',
- auditTime: '',
- auditStatusDict: '1',
- baseMessage: '',
- createBy: '',
- createDate: '',
- updateBy: '',
- updateDate: '',
- },
- baseContactsInfo:{
- id: null,
- contactsType: '',
- contactsTypeDict: '',
- contactsName: '',
- currentDuty: '',
- depart: '',
- telephoneNumber: '',
- mobilePhone: '',
- email: '',
- spareEmail: '',
- faxNumber: '',
- userId: '',
- userType:'alliance_apply',
- remarks: '',
- createBy: '',
- createDate: '',
- updateBy: '',
- updateDate: '',
- },
- processKey: 'ALLIANCE_APPROVAL',
- approvers:[],
- duty:'',
- group:'',
- leagueMap:{}
- }
- },
- created(){
- getBaseLeagueApplys().then(res=>{
- var data = res.data;
- if(data){
- this.baseLeagueApply = data.baseLeagueApplyList[0]||{};
- this.baseContactsInfo = data.baseContactsInfo||{};
- this.leagueType = data.leagueType||[];
- this.active=2;
- }
- });
- },
- mounted(){
- this.getIntaData();
- },
- watch:{
- "$i18n.locale"(){
- this.$refs.form.clearValidate();
- this.$refs.form2.clearValidate();
- this.getIntaData();
- },
- leagueType: function () {
- var leagueType = [];
- if(this.leagueType.length > 0){
- this.leagueType.forEach(e=>{
- leagueType.push(this.leagueMap[e])
- })
- }
- this.baseLeagueApply.leagueName = leagueType.join(',');
- },
- },
- computed:{
- form1Rules(){
- return {
- unitCountryDict:[
- {required: true, message: this.$t('common.PleaseSelect')+' '+this.$t('common.Country'), trigger: 'change'}
- ],
- unitZhName: [
- { required: true, message: this.$t('common.PleaseEnter')+' '+this.$t('common.NameoftheEntity'), trigger: 'blur' }
- ],
- unitEnName: [
- { required: true, message: this.$t('common.PleaseEnter')+' '+this.$t('common.FullEnglishnameofunit'), trigger: 'blur' }
- ],
- unitWebsite: [
- { required: true, message: this.$t('common.PleaseEnter')+' '+this.$t('common.OfficialWebsite'), trigger: 'blur' }
- ],
- unitAddress: [
- { required: true, message: this.$t('common.PleaseEnter')+' '+this.$t('common.Unitaddress'), trigger: 'blur' }
- ],
- postalCode: [
- { required: true, message: this.$t('common.PleaseEnter')+' '+this.$t('common.PostalCode'), trigger: 'blur' }
- ],
- corporateName:[
- { required: true, message: this.$t('common.PleaseEnter')+' '+this.$t('common.LegalRepresentative'), trigger: 'blur' }
- ],
- unitIntroduction:[
- { required: true, message: this.$t('common.PleaseEnter')+' '+this.$t('common.BriefIntroductionOfApplicant'), trigger: 'blur' }
- ],
- }
- },
- rules(){
- return {
- contactsName: [
- { required: true, message: this.$t('common.PleaseEnter')+' '+this.$t('common.fullName'), trigger: 'blur' },
- ],
- currentDuty: [
- { required: true, message: this.$t('common.PleaseEnter')+' '+this.$t('common.Position'), trigger: 'blur' }
- ],
- telephoneNumber: [
- { required: true, message: this.$t('common.PleaseEnter')+' '+this.$t('common.ContactPhoneNumber'), trigger: 'blur' },
- { pattern: /^[0-9]*$/, message: this.$t('common.OnlyInputNumber'), trigger: 'blur' }
- ],
- email: [
- { required: true, message: this.$t('common.PleaseEnter')+' '+this.$t('common.Email'), trigger: 'blur' },
- ],
- }
-
- },
- },
- methods:{
- agreementChange(val){
- this.active=val;
- },
- getIntaData(){
- getBaseLeagues({language:this.$i18n.locale.toUpperCase()}).then(result =>{
- const data = result.data
- this.baseLeagueInfos = data.baseLeagueInfos;
- this.baseLeagueInfos.forEach(element=>{
- this.leagueMap[element.baseEntityId] = element.leagueName;
- })
- });
- country({language:this.$i18n.locale.toUpperCase()}).then(res=>{
- this.countryList=res.data.countryList;
- })
- },
- // 提交并下载
- submitForm(){
- this.$refs["form"].validate((valid1) => {
- if (valid1) {
- this.$refs["form2"].validate((valid2) => {
- if (valid2) {
- this.print()
- } else {
- this.$notify.error({
- title: 'error',
- message: this.$t('common.pleaseContactInformation')
- });
- this.activeNames=["2"]
- return false;
- }
- })
-
- } else {
- this.$notify.error({
- title: 'error',
- message: this.$t('common.unitInfo')
- });
- this.activeNames=["1"]
- return false;
- }
- });
-
- },
- print(){
- loading();
- if (this.duty || this.group) {
- getUsers({
- duty: this.duty,
- groups: this.group,
- }).then(res => {
- let data = res.data || {};
- let approvers = data.authUsers || [];
- if (approvers && approvers.length > 0) {
- this.approver = '';
- approvers.forEach(item => {
- this.approver += item.userId + ",";
- });
- this.approver = this.approver.substring(0, this.approver.length - 1);
- }
- });
- }
- this.baseLeagueApply.phaseDict = '1';
- this.baseLeagueApply.statusDict = this.submitStatus;
- this.baseLeagueApply.auditStatusDict = '1';
- this.baseLeagueApply.leagueId = this.leagueType.join(',');
- var users=localStorage.getItem('user');
- var user = JSON.parse(users);
- this.baseLeagueApply.subName = user.username;
- this.baseLeagueApply.subAccount = user.umsUser.userUid;
- this.baseLeagueApply.subCompany = this.baseLeagueApply.unitZhName;
- this.baseLeagueApply.subPhone = user.umsUser.userPreferredMobile;
- this.baseLeagueApply.subMail = user.umsUser.userEmail;
- var leagueType = [];
- if(this.leagueType.length > 0){
- this.leagueType.forEach(e=>{
- leagueType.push(this.leagueMap[e])
- })
- }
- this.baseLeagueApply.leagueName = leagueType.join(',');
- this.submitHandler((token) => {
- submitApplyPortal(JSON.stringify(this.baseLeagueApply),JSON.stringify(this.baseContactsInfo),null,this.approver, this.taskComment,token).then(res=>{
- this.$message({
- message: this.$i18n.locale.toUpperCase()=="ZH"?'添加资料成功':'submit success',
- type: 'success'
- });
- this.resetToken();
- this.active=2;
- closeLoading();
- }).catch(error => {
- this.resetToken();
- closeLoading();
- });
- })
- },
- // 发送申请表
- submitFormApplication(){
- },
- realTimeInfoScreen(item,index){
- this.toView('IntroductionMemberProfile',index)
- },
- getIconUrl(url){
- return require("@/assets/img/introductionCooperation/"+url);
- },
- toView(router,json){
- this.$router.push({name:router,query:{key:json}})
- },
- toNewView(router,json){
- this.$store.commit('modify', router);
- window.localStorage.setItem('router', router);
- const { href } = this.$router.resolve({
- name: router,
- query: {
- key: json
- },
- });
- window.open(href, '_blank');
- },
- toViewCenter(router,json){
- this.$router.push({name:router,params:{index:json}})
- },
- resetForm(item) {
- this[item] = {};
- console.log( this.form2)
- this.$refs.form2.resetFields()
-
- if(this.$refs[formName]){
- this.$refs[item].resetFields()
- }
- }
- }
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- .box {
- margin-top: 10px;
- background: #fff;
- min-height: 500px;
- padding: 20px 0;
- }
- .crumbs {
- margin-left: 20px;
- }
- body {
- margin: 0;
- }
- .crumbs >>>.el-step__icon {
- width: 37px;
- height: 37px;
- font-size: 18px;
- }
- .crumbs>>> .el-step.is-horizontal .el-step__line {
- top:20px;
- }
- .crumbs>>>.el-step__head.is-process {
- color: #409eff;
- border-color:inherit;
- }
- .crumbs>>>.el-step__head.is-process .el-step__icon.is-text {
- background: #409eff;
- color: #fff;
- border-color:#409eff;
- width: 46px;
- height: 46px;
- }
- .crumbs>>>.el-step__title.is-process,
- .crumbs>>>.el-step__description.is-process {
- color: #409eff;
- }
- .crumbs>>>.el-collapse-item {
- /* width: 80%; */
- margin: auto;
- }
- .el-collapse {
- border: none;
- }
- .crumbs>>>.el-collapse-item__header {
- padding: 0 20px 0 100px;
- font-weight: 700;
- }
- .crumbs>>>.el-collapse-item__content {
- padding: 0 0 0 100px;
-
- }
- .el-checkbox {
- display: inline-block;
- margin-bottom: 20px;
- }
- .avatar-uploader .el-upload {
- border: 1px solid #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;
- }
- .crumbs>>>.el-collapse-item__header.is-active {
- border-bottom-color: #EBEEF5;
- }
- .button_409EFF {
- border-color:#409EFF ;
- color: #409EFF;
- }
- .form2Sty{
- margin-top: 20px;
- width: 100%;
- }
- .form2Sty>>>.el-collapse-item__content{
- /* padding-left: 20px; */
- width: 49%;
- }
- .form2Sty>>>.el-form-item{
- width: 50%;
- float: left;
- }
- .screen1 {
- background: linear-gradient(180deg, #3280E2 0%, #144E97 100%);
- border-radius: 20px 20px 20px 20px;
- padding: 8px 12px;
- color: #F0F3F8;
- margin-left: 10px;
- }
- .screen2 {
- font-size: 14px;
- background: linear-gradient(180deg, #B4D5FF 0%, #4F81BF 100%);
- border-radius: 20px;
- padding: 8px 12px;
- color: #165099;
- margin-left: 10px;
- }
- </style>
|