前端常遇到的问题！！！
Posted liurunmin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端常遇到的问题！！！相关的知识，希望对你有一定的参考价值。
一丶element-ui中遇到的坑
1.message消息提示框
我们在点击弹出消息提示时，点击多次的话会一直弹出多个相同的消息提示，感觉非常的不友好。这时候我们可以在调用 Message 或 this.$message 会返回当前 Message。 调用实例之前关闭前面提示就好了。
这其实很简单，就是一句代码的事：加上 this.$message.closeAll()就好了！！！
async findTijiao () {
this.$message.closeAll() // (只弹出一个消息提示框)
let tj = checkPhone(this.findMobile, 1) // 找回密码手机号
let findMima = checkPhone(this.findMima, 2) // 新密码
let againMima = checkPhone(this.confirmWord, 2) // 再次输入的新密码
if (tj.code === 500 || findMima.code == 500 || againMima.code == 500) {
this.$message(tj.msg + ‘和相关的信息‘)
return
}
if (tj.code === 200) {
if (this.findMima === this.againMima) {
let res = await this.$http.post(‘/api/retrievePasswd‘, {
mobile: this.findMobile,
password: this.findMima,
verification_code: this.findY
})
if (res.data.code === 200) {
// 隐藏找回密码对话框和展示show2
this.show = 1
this.pswdDialogVisible = false
if (this.$route.path !== ‘/‘) {
this.$router.push({ path: ‘/‘ })
}
this.$message({
message: ‘找回密码成功‘
})
} else if (res.data.code === 10002) {
this.$message({
message: ‘验证码错误‘
})
} else if (res.data.code === 10001) {
this.$message({
message: ‘手机格式错误‘
})
}
} else {
this.$message(‘两次输入的密码不一致‘)
}
}
}
2.tooltip文字提示
我们鼠标移入的时候会弹出一个提示框，里边的内容我们可以通过slot="content"来显示想要提示的内容，不过当我们想要现实鼠标移出目标元素就关闭提示时（也就是hover效果）就需要添加
:enterable=‘false‘这么一段代码
<el-tooltip
v-if="win[i] && k < win[i].bo_list.length && win[i].bo_list.length > 0"
class="item"
:key="k"
effect="dark"
placement="bottom"
:enterable=‘false‘ // hover效果
>
<div slot="content" class="xianshi"> //编辑提示的内容
<span class="yincang" :title="win[i].bo_list[k].league_name">{{win[i].bo_list[k].league_name}}</span>
<br />
<span class="shijian">{{statrTime(win[i].bo_list[k].begin_time)}}</span>
<br />
<span class="bifen">{{win[i].bo_list[k].kills}} : {{win[i].bo_list[k].opponent.kills}}</span>
<br />
<span class="zhandui">{{win[i].bo_list[k].team_name}} : {{win[i].bo_list[k].opponent.team_name}}</span>
</div>
<div :class="{‘nei‘:true, sheng:win[i].bo_list[k].is_win}">
<span>{{win[i].bo_list[k].is_win?‘胜‘:‘负‘}}</span>
</div>
</el-tooltip>
3.修改element-ui组件里边的样式
我们开发的时候，要改组件的里边的样式时，就在
<style lang="less" scoped>里边直接加话是没有效果的，此时我们可以在全局给样式，或者在样式前边加上/ deep /
/deep/ .el-input__inner { //样式修改
text-align: center;
width: 100%;
color: #fff;
}
二丶做登录和注册页面时要用到的一些验证
1.通过es6的 export 和 import 来封装方法和调用
（1）模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出
（2）export定义了模块的对外接口后，其他JS文件就可以通过import来加载这个模块
2.手机验证和验证码验证以及密码验证
（1）定义一个msg对象
const msg = {
‘code‘: 500,
‘msg‘: ‘错误！‘
}
（2）封装checkPhone方法return msg
export function checkPhone (str, flag) {
// 检验手机号 //str是传入的字符串，flag是用来判断是验证手机号码还是验证码以及密码的
if (flag == 1) {
//正则判断手机号码
var reg = 10 && /^((13|14|15|17|18)[0-9]{1}d{8})$/
if (str == ‘‘) {
msg.code = 500
msg.msg = ‘请输入手机号码‘
} else if (!reg.test(str)) {
msg.code = 500
msg.msg = ‘手机格式不正确‘
} else {
msg.code = 200
msg.msg = ‘成功‘
}
} else if (flag == 2) {
var reg_pass = /^(w){6,20}$/
// 密码6到20位数字的密码
//为空时提示请输入密码
if (str == ‘‘) {
msg.code = 500
msg.msg = ‘请输入密码‘
} else if (!reg_pass.test(str)) {
msg.code = 500
msg.msg = ‘密码格式不正确, 请输入6-20位数字。‘
} else {
msg.code = 200
}
} else if (flag == 3) {
// 验证码，验证输入6位数的数字验证码
var reg_yanzheng = /^d{6}$/
if (str == ‘‘) {
msg.code = 500
msg.msg = ‘请输入验证码‘
} else if (!reg_yanzheng.test(str)) {
msg.code = 500
msg.msg = ‘验证码格式不正确, 请输入6位数的验证码。‘
} else {
msg.code = 200
}
}
return msg
}
（3）调用
import { checkPhone } from ‘@/utils/common.js‘ //调用验证的方法
async register () {
this.$message.closeAll()
let ss = checkPhone(this.zhucePassword, 2) // 声明一个ss变量接收要验证的手机号码或着验证码以及密码
// let sss = checkPhone(this.verification_code, 3) // 验证码 （this.zhucePasswordthis就是CheckPhone中的str而这里的1，2，3就是flag）
let ssss = checkPhone(this.againzhuce, 2) // 再次密码
if (ss.code === 500 || ssss.code === 500) {
this.$message(ss.msg)
return
}// if (this.checked === true) 是否阅读和勾选协议
if (this.zhucePassword === this.againzhuce) {
if (this.checked === true) {
let res = await this.$http.post(‘/api/register‘, {
verification_code: ‘‘,
mobile: this.mobile,
password: this.zhucePassword
})
if (res.data.code === 200) {
this.show = 2
if (this.$route.path !== ‘/‘) {
this.$router.push({ path: ‘/‘ })
}
// this.centerDialogVisible = false
this.$store.commit(‘CHANGE_ZUCHE‘, false)
this.$cookies.set(‘logintoken‘, res.data.data.user_token, {
expires: getExpireTime(res.data.data.expire_time)
})
this.$store.commit(‘LOGIN_TOKEN‘, {
loginToken: res.data.data.user_token
})
localStorage.setItem(‘userInfo‘, JSON.stringify(res.data.data))
this.$store.commit(‘USERINFO‘, { userInfo: res.data.data })
localStorage.setItem(
‘userId‘,
JSON.stringify(res.data.data.user_id)
)
this.$store.commit(‘USER_ID‘, { userId: res.data.data.user_id })
} else if (res.data.code === 10007) {
this.$message(‘该手机号已经注册!‘)
}
} else {
this.$message(‘请阅读并勾选用户协议‘)
}
} else {
this.$message(‘两次密码不一致‘)
}
}
2.时间戳转换为日期和时间，以及取小数后几位
export function times (time传入的参数)｛
let d = new Date(time*1000)//毫秒转换成秒
let mon =(d.getMonth()+1)//转换成月份的时候要注意是从0开始的记得加1
let day =d.getDate()
let h=d.getHours()
let m=d.getMinuters()
//利用二元判断是否小于10，小于的话前面加0
mon = mon<10? "0"+mon:mon
day = day<10?"0"+day:day
h = h < 10 ? ‘0‘ + h : h
m = m < 10 ? ‘0‘ + m : m
//返回格式2019-11-11-8-23
return (
d.getFullYear() + ‘-‘ + mon + ‘-‘ + day + ‘ ‘ + h + ‘:‘ + m
)
｝
2.调用方法
import { times } from ‘@/utils/common.js‘
调用一下
methods: {
times (time) {
return shijian(time)
}
},
使用
<span>{{shijian(item && item.begin_time?item.begin_time:"")}}</span>
3.取两位小数
封装
export function jsRound (number, precision) {
return Math.round(+number + ‘e‘ + precision) / Math.pow(10, precision)
}
调用
methods: {
// 四舍六入 .toFixed()
// 取两位小数
format (t) {
return jsRound(t, 2)
}
}
}
怎么用
<span>参团率：{{format(item.ave_group_rate*100)}}%</span>
三丶点击导航栏切换显示不同的内容
如下图切换不同的位置显示两队不同位置的数据对比
导航栏的代码实现
<div v-for="(v,i) in list" :key="i" @click="changeL(i)" :class="{active: i == active}" >{{ v }}</div> </div>
//下面是说明
:class="{active: i == active}"根据下标绑定类实现点击切换高亮
@click="changeL(i)"点击事件传入下标为参数
data () {
return {
list: [‘上单‘, ‘打野‘, ‘中单‘, ‘ADC‘, ‘辅助‘],利用v-for显示导航栏的显示
active: 0,默认下标为0的高亮
src: require(‘@/assets/image/default.png‘),设置图片src为空时显示的默认图片
//下面相当与映射，把后端返回的英文字段用中文渲染但页面上
//页面上如何用如下
//<span class="player-wz">{{areaString[item.game_id][item.area]}}</span>这里的game_id为1，即areaSring[1][item.area]
areaString: {
‘1‘: {
‘top‘: ‘上单‘,
‘jun‘: ‘打野‘,
‘mid‘: ‘中路‘,
‘adc‘: ‘ADC‘,
‘sup‘: ‘辅助‘
},
‘2‘: {
‘top‘: ‘一号位‘,
‘mid‘: ‘二号位‘,
‘adc‘: ‘三号位‘,
‘jun‘: ‘四号位‘,
‘sup‘: ‘五号位‘
}
}
}
},
methods: {
//点击事件，点击切换显示
changeL (i) {
this.active = i
},
// 四舍六入 .toFixed()
// 取两位小数
format (t) {
return jsRound(t, 2)
}
}
蓝队
<div class="content" v-for="(item,index) in teamPlayer[0]" :key="‘a‘+index" v-if="index == active">
.....//这里是你要显示的内容，kda,参团率什么的
//
v-if="index == active"因为遍历出来的有五个位置，所以要用v-if绑定下标index==active来切换显示各个位置的信息
</div>
红队
<div class="content" v-for="(item,index) in teamPlayer[1]" :key="‘aa‘+index" v-if="index == active"> .....//这里是你要显示的内容，kda,参团率什么的
key拼接aa是因为有两个相同的key报错如下
vue.esm.js?efeb:628 [Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.
</div>
四丶往二维数组里边加字段
以下是返回的数据结构
computed: { teamPlayer () { // 加字段 let t = this.data.teamPlayer || [] for (let i = 0; i < t.length; i++) { // e=teamPlayer[0,1]一维 const e = t[i] for (let k = 0; k < e.length; k++) { // ee=teamPlaye[0,1,2,3,4]二维 const ee = e[k] // 在二维数组里边加字段‘kda‘ t[i][k][‘kda‘] = ((ee.ave_assists + ee.ave_kills) / ee.ave_deaths).toFixed(2) } } for (let i = 0; i < t.length; i++) { const e = t[i] for (let k = 0; k < e.length; k++) { const ee = e[k] // kda的百分比 t[i][k][‘kda_width‘] = parseInt((t[i][k][‘kda‘] / (parseFloat(t[0][k][‘kda‘]) + parseFloat(t[1][k][‘kda‘]))) * 100) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的分经济总和 t[i][k][‘double_economy‘] = parseInt((parseFloat(t[0][k][‘ave_min_economy‘]) + parseFloat(t[1][k][‘ave_min_economy‘]))) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的分输出总和 t[i][k][‘double_output‘] = parseInt((parseFloat(t[0][k][‘ave_min_output‘]) + parseFloat(t[1][k][‘ave_min_output‘]))) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的参团率总和 t[i][k][‘double_groupRate‘] = ((parseFloat(t[0][k][‘ave_group_rate‘]) + parseFloat(t[1][k][‘ave_group_rate‘]))) } } return t } },
完整代码如下
<template> <div> <div class="all"> <div class="top"> <div v-for="(v,i) in list" :key="i" @click="changeL(i)" :class="{active: i == active}" >{{ v }}</div> </div> <!-- 蓝队 --> <!-- 盒子 --> <div> <!-- key重复声明报错 字符串拼接成不同的key --> <div class="content" v-for="(item,index) in teamPlayer[0]" :key="‘a‘+index" v-if="index == active"> <!-- 队伍头像 --> <div class="team-icon"> <img :src="item.team_icon?item.team_icon:srcO" alt /> </div> <!-- 玩家信息 --> <div class="play"> <!-- 左边 --> <div class="player"> <!-- 玩家头像 --> <!-- <img class="touxiang" :src="item.head_img?item.head_img:src" alt /> --> <div class="touxiang" :style="{backgroundImage:‘url(‘+(item.head_img)+‘)‘}"></div> <!-- 玩家名字 --> <span class="player-id">{{item.player_name}}</span> <!-- 玩家位置 --> <span class="player-wz">{{areaString[item.game_id][item.area]}}</span> </div> <!-- 右边 --> <div class="match-message"> <!-- KDA --> <div class="kda"> <!-- 进度条 --> <div class="jd-1"> <div class="jd-nei" :style="{width: item.kda_width + ‘%‘}"></div> </div> <div class="kill"> <span>KDA：{{item.ave_kills}}/{{item.ave_deaths}}/{{item.ave_assists}}</span> </div> </div> <!-- 分经济 --> <div class="jing-ji kda"> <div class="jd-1 jd-2"> <div class="jd-nei" :style="{width: (item.ave_min_economy/item.double_economy)*100+ ‘%‘}"></div> </div> <div class="money kill"> <span>分均经济：{{item.ave_min_economy}}</span> </div> </div> <!-- 分均输出 --> <div class="shu-chu kda"> <div class="jd-1 jd-3"> <div class="jd-nei" :style="{width: (item.ave_min_output/item.double_output)*100 + ‘%‘}"></div> </div> <div class="shang-hai kill"> <span>分均输出：{{item.ave_min_output}}</span> </div> </div> <!-- 参团率 --> <div class="can-tuan kda"> <div class="jd-1 jd-4"> <div class="jd-nei" :style="{width: item.ave_group_rate*100 + ‘%‘}"></div> </div> <div class="tuan-zhan kill"> <span>参团率：{{format(item.ave_group_rate*100)}}%</span> </div> </div> </div> </div> </div> <!-- 红队 --> <div class="second content" v-for="(item,index) in teamPlayer[1]" :key="‘aa‘+index" v-if="index == active"> <!-- 战队图标 --> <div class="team-icon"> <img :src="item.team_icon?item.team_icon:srcO" alt /> </div> <!-- 玩家信息 --> <div class="play"> <!-- 左边 --> <div class="player"> <!-- 玩家头像 --> <!-- <img class="touxiang" :src="item.head_img?item.head_img:src" alt /> --> <div class="touxiang" :style="{backgroundImage:‘url(‘+(item.head_img)+‘)‘}"></div> <!-- 玩家名字 --> <span class="player-id">{{item.player_name}}</span> <!-- 玩家位置 --> <span class="player-wz">{{areaString[item.game_id][item.area]}}</span> </div> <!-- 右边 --> <div class="match-message"> <!-- KDA --> <div class="kda"> <div class="jd-1"> <div class="jd-nei" :style="{width: item.kda_width + ‘%‘}"></div> </div> <div class="kill"> <span>KDA：{{item.ave_kills}}/{{item.ave_deaths}}/{{item.ave_assists}}</span> </div> </div> <!-- 分均经济 --> <div class="jing-ji kda"> <div class="jd-1"> <div class="jd-nei" :style="{width: (item.ave_min_economy/item.double_economy)*100 + ‘%‘}"></div> </div> <div class="money kill"> <span>分均经济：{{item.ave_min_economy}}</span> </div> </div> <!-- 分均输出 --> <div class="shu-chu kda"> <div class="jd-1"> <div class="jd-nei" :style="{width: (item.ave_min_output/item.double_output)*100 + ‘%‘}"></div> </div> <div class="shang-hai kill"> <span>分均输出：{{item.ave_min_output}}</span> </div> </div> <!-- 参团率 --> <div class="can-tuan kda"> <div class="jd-1"> <div class="jd-nei" :style="{width: (item.ave_group_rate*100)+ ‘%‘}"></div> </div> <div class="tuan-zhan kill"> <span>参团率：{{format(item.ave_group_rate*100)}}%</span> </div> </div> </div> </div> </div> </div> </div> </div> </template> <script> import { jsRound } from ‘@/utils/common.js‘ export default { name: ‘player‘, props: [‘data‘], data () { return { list: [‘上单‘, ‘打野‘, ‘中单‘, ‘ADC‘, ‘辅助‘], active: 0, src: require(‘@/assets/image/default.png‘), srcO: require(‘@/assets/image/teamDefault.png‘), areaString: { ‘1‘: { ‘top‘: ‘上单‘, ‘jun‘: ‘打野‘, ‘mid‘: ‘中路‘, ‘adc‘: ‘ADC‘, ‘sup‘: ‘辅助‘ }, ‘2‘: { ‘top‘: ‘一号位‘, ‘mid‘: ‘二号位‘, ‘adc‘: ‘三号位‘, ‘jun‘: ‘四号位‘, ‘sup‘: ‘五号位‘ } } } }, computed: { teamPlayer () { // 加字段 let t = this.data.teamPlayer || [] for (let i = 0; i < t.length; i++) { // e=teamPlayer[0,1] const e = t[i] for (let k = 0; k < e.length; k++) { // ee=teamPlayer[0,1][0,1,2,3,4] const ee = e[k] // 在二维数组里边加字段‘kda‘ t[i][k][‘kda‘] = ((ee.ave_assists + ee.ave_kills) / ee.ave_deaths).toFixed(2) } } for (let i = 0; i < t.length; i++) { const e = t[i] for (let k = 0; k < e.length; k++) { const ee = e[k] // kda的百分比 t[i][k][‘kda_width‘] = parseInt((t[i][k][‘kda‘] / (parseFloat(t[0][k][‘kda‘]) + parseFloat(t[1][k][‘kda‘]))) * 100) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的分经济总和 t[i][k][‘double_economy‘] = parseInt((parseFloat(t[0][k][‘ave_min_economy‘]) + parseFloat(t[1][k][‘ave_min_economy‘]))) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的分输出总和 t[i][k][‘double_output‘] = parseInt((parseFloat(t[0][k][‘ave_min_output‘]) + parseFloat(t[1][k][‘ave_min_output‘]))) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的参团率总和 t[i][k][‘double_groupRate‘] = ((parseFloat(t[0][k][‘ave_group_rate‘]) + parseFloat(t[1][k][‘ave_group_rate‘]))) } } return t } }, methods: { changeL (i) { this.active = i }, // 四舍六入 .toFixed() // 取两位小数 format (t) { return jsRound(t, 2) } } } </script> <style lang="less" scoped> .all { width: 420px; height: 508px; background: rgba(51, 51, 51, 1); .top { padding: 20px 20px 20px 16px; display: flex; width: 384px; height: 36px; div { font-size: 14px; background: rgba(40, 40, 40, 1); width: 76px; height: 36px; display: inline-block; text-align: center; line-height: 36px; color: #ccc; margin-left: 1px; cursor: pointer; } .active { background: #505050; } } .content { width: 400px; height: 194px; font-size: 12px; // background-color: #ccc; .team-icon { width: 20px; height: 20px; // background-color: pink; margin-left: 100px; img { width: 100%; height: 100%; } } .play { width: 400px; height: 164px; margin-top: 10px; display: flex; .player { width: 100px; height: 164px; // background-color: pink; padding-top: 30px; box-sizing: border-box; // 头像用背景图 .touxiang { margin: 0 auto; // display: block; // width: 60px; // height: 60px; // background: rgba(153, 153, 153, 1); // border-radius: 30px; width: 60px; height: 60px; background: rgba(153, 153, 153, 1); border-radius: 50%; background-size: cover; background-repeat: no-repeat; background-position: center; } .player-id { display: block; text-align: center; line-height: 36px; color: #ccc; } .player-wz { display: block; text-align: center; color: #ccc; } } .match-message { width: 300px; height: 164px; color: #ccc; // background-color: yellowgreen; .kda { width: 300px; height: 41px; .jd-1 { width: 300px; height: 6px; background-color: #999999; .jd-nei { height: 6px; background-color: #23A8F6; } } .kill { width: 300px; margin-top: 10px; // color:#ccc; } } } } } .second { margin-top: 20px; .match-message { .jd-1 { background-color: #999999; } .jd-nei { height: 6px; background-color: #f6233f !important; } } } } </style>
五丶有关src图片拉伸
有时我们从后台返回的数据中拿到的图片会很大，就会有拉伸的问题，这是时候我们改为背景图就可以了
<div class="touxiang" :style="{backgroundImage:‘url(‘+(item.head_img)+‘)‘}"></div>
样式：上面完整的代码有用到
.touxiang {
margin: 0 auto;
width: 60px;
height: 60px;
background: rgba(153, 153, 153, 1);
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
六丶vue中的移入移出，以及滚动到一定高度显示和点击置顶
滚动条滚动往下距离大于60时显示如图
具体代码如下
<template> <div> <div class="all" v-if="btnFlag"> <div class="jwplay" @mouseover="mouseOver" @mouseleave="mouseLeave"> <div class="wechat" :style="active"> <img src="../../assets/image/default.png" alt /> </div> <p>嘻嘻</p> <p>APP</p> </div> <div class="arrowTip" @mouseover="one" @mouseleave="two" ref="cc"> <i class="jiantou font_family icon-shouqi" :style="aa"></i> <span :style="bb" @click="toTop">你好</span> </div> </div> </div> </template> <script> export default { name: ‘wechat‘, data () { return { active: ‘display:none‘, aa: ‘display:block‘, bb: ‘display:none‘, btnFlag: false//v-if让它一开始不显示 } }, // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件 mounted () { window.addEventListener(‘scroll‘, this.scrollToTop) }, destroyed () { window.removeEventListener(‘scroll‘, this.scrollToTop) }, methods: { mouseOver () { this.active = ‘display:block‘ }, mouseLeave () { this.active = ‘display:none‘ }, one () { this.aa = ‘display:none‘ this.bb = ‘display:block‘ var dd = this.$refs.cc dd.style.backgroundColor = ‘#ED5019‘ }, two () { this.bb = ‘display:none‘ this.aa = ‘display:block‘ var dd = this.$refs.cc dd.style.backgroundColor = ‘#222222‘ }, // 点击图片回到顶部方法，加计时器是为了过渡顺滑 toTop () { const that = this let timer = setInterval(() => { let ispeed = Math.floor(-that.scrollTop / 5) document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed if (that.scrollTop === 0) { clearInterval(timer) } }, 16) }, // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏， scrollToTop () { const that = this //this指向问题 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop that.scrollTop = scrollTop if (that.scrollTop > 60) { that.btnFlag = true } else { that.btnFlag = false } } } } </script> <style lang="less" scoped> .all { width: 180px; height: 320px; // background-color: pink; position: fixed; right: 100px; top: 564px; .jwplay { .wechat { position: absolute; top: -200px; left: 0px; box-sizing: border-box; width: 180px; height: 190px; background:rgba(26,38,59,1); padding: 10px 10px; img { display: block; width: 160px; height: 160px; // background: yellow; } } box-sizing: border-box; width: 60px; height: 60px; background: rgba(237, 80, 25, 1); border-radius: 6px; color: #fff; text-align: center; margin: 0 auto; margin-top: 2px; padding-top: 12px; cursor: pointer; p { position: relative; font-size: 12px; } } .arrowTip { width: 60px; height: 60px; background:rgba(34,34,34,1); border-radius: 8px; margin: 0 auto; margin-top: 8px; box-sizing: border-box; padding-top: 18px; cursor: pointer; i{ font-size: 24px; display: block; text-align: center; // background-color: green; margin: 0 auto; color: #fff; } span{ position: absolute; top: 88px; left: 74px; color: #fff; } } } </style>
以上是关于前端常遇到的问题！！！的主要内容，如果未能解决你的问题，请参考以下文章