976 lines
30 KiB
Vue
976 lines
30 KiB
Vue
<template>
|
||
<div class="personal">
|
||
<!-- 首页导航 -->
|
||
<Navs></Navs>
|
||
<div class="cont">
|
||
<!-- 全局搜索 -->
|
||
<search></search>
|
||
<div class="cont_content" v-if="cont_basic.length>0">
|
||
<div class="header">
|
||
<div class="left">个人中心</div>
|
||
<div class="right">
|
||
<img :src="imgurl.pos" alt />
|
||
<span>当前位置：</span>
|
||
<span @click="$router.push('/')">首页</span>
|
||
>
|
||
<span @click="$router.push('/personalCenter')">个人中心</span>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="left">
|
||
<div :class="{active:staticSelect==='基本设置'}" @click="clickStic('基本设置')">基本设置</div>
|
||
<div :class="{active:staticSelect==='安全设置'}" @click="clickStic('安全设置')">安全设置</div>
|
||
<div :class="{active:staticSelect==='我的收藏'}" @click="clickStic('我的收藏')">我的收藏</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="right_title">
|
||
<div class="left">{{staticSelect}}</div>
|
||
<div class="right" v-if="staticSelect==='我的收藏'&&collect">
|
||
<input type="text" placeholder="请输入搜索内容" v-model="searchCollect" />
|
||
<div @click="getCollectData(1)">搜索</div>
|
||
</div>
|
||
</div>
|
||
<!-- 基本设置 -->
|
||
<div class="right_cont_basic" v-if="staticSelect==='基本设置'">
|
||
<div v-for="(item,index) in cont_basic" :key="index">
|
||
<div>{{item.keys}}</div>
|
||
<div>{{computedStr(item.values)}}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 安全设置 -->
|
||
<div class="right_cont_fafety" v-if="staticSelect==='安全设置'">
|
||
<div class="conty">
|
||
<div class="zm">账号密码</div>
|
||
<div class="updata" @click="updata">修改</div>
|
||
</div>
|
||
<div class="contys">
|
||
<div>{{showPass?password:'********'}}</div>
|
||
<img :src="showPass?imgurl.closeyj:imgurl.openyj" alt @click="staticUp" />
|
||
</div>
|
||
</div>
|
||
<!-- 我的收藏 -->
|
||
<div class="right_cont_collect" v-if="staticSelect==='我的收藏'">
|
||
<div class="collect_yes" v-if="collect">
|
||
<div class="content">
|
||
<div class="header">
|
||
<div>名称</div>
|
||
<div>所属库</div>
|
||
<div>创建时间</div>
|
||
<div>操作</div>
|
||
</div>
|
||
<div class="cont">
|
||
<div v-for="(item,index) in collect" :key="index">
|
||
<div :title="item.name">
|
||
<span v-if="!item.staticInput">{{item.name}}</span>
|
||
<input
|
||
type="text"
|
||
:placeholder="item.name"
|
||
v-model="collectName"
|
||
v-if="item.staticInput"
|
||
v-focus="true"
|
||
@blur="blurUpset(item.id,item.name)"
|
||
@keyup.enter="blurUpset(item.id,item.name)"
|
||
/>
|
||
</div>
|
||
<div :title="item.database" @click="jumpSearch(item)">{{item.database}}</div>
|
||
<div>{{item.birthTime}}</div>
|
||
<div class="handle">
|
||
<div @click="editName(index)">编辑</div>/
|
||
<div @click="deleteData(item.id)">删除</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 分页 :hide-on-single-page="value"显示隐藏分页-->
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
:total="pageConfiguration.countSize"
|
||
class="pagination"
|
||
:page-size="pageConfiguration.oneSize"
|
||
:hide-on-single-page="true"
|
||
@current-change="currentChange"
|
||
></el-pagination>
|
||
</div>
|
||
<div
|
||
class="collect_no"
|
||
v-if="!collect"
|
||
>{{!collect?collect.length!==0?'':'暂无收藏记录':'加载中...'}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="cont_basic.length===0" class="cont_content_basic">数据加载中...</div>
|
||
</div>
|
||
|
||
<!-- 页脚信息 -->
|
||
<FooterInfors></FooterInfors>
|
||
<!-- 设置密码窗口 -->
|
||
<section class="loginSty" v-if="showWinStatic">
|
||
<div class="loginSty_wcont">
|
||
<div class="wcont_header">
|
||
<div>设置密码</div>
|
||
<img :src="imgurl.deleteimg" alt @click="closeLoginWind(false)" />
|
||
</div>
|
||
<div class="wcont_content">
|
||
<div>
|
||
<img :src="imgurl.userpwds" alt />
|
||
<input type="password" placeholder="请输入密码" v-model="userpwd" />
|
||
</div>
|
||
<div>
|
||
<img :src="imgurl.userpwds" alt />
|
||
<input type="password" placeholder="请输入确认密码" v-model="userpwdQR" />
|
||
</div>
|
||
<div @click="closeLoginWind(true)">确认</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
// 导航
|
||
import Nav from '@/components/nav/Nav.vue'
|
||
// 页脚信息
|
||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||
// 全局搜索
|
||
import search from '@/components/search/search.vue'
|
||
export default {
|
||
name: 'personal',
|
||
components: {
|
||
Navs: Nav,
|
||
FooterInfors: FooterInfor,
|
||
search: search
|
||
},
|
||
data () {
|
||
return {
|
||
imgurl: {
|
||
pos: require('../../../static/company/posweizhi.png'),
|
||
openyj: require('../../../static/personalCenter/openyj.png'),
|
||
closeyj: require('../../../static/personalCenter/closeyj.png'),
|
||
userpwds: require('../../../static/nav/userpwds.png'),
|
||
deleteimg: require('../../../static/nav/deleteImg.png')
|
||
},
|
||
// 当前左侧选中状态
|
||
staticSelect: '基本设置',
|
||
// 基本设置数据
|
||
cont_basic: [
|
||
// {
|
||
// keys: '用户名称',
|
||
// values: '张三'
|
||
// },
|
||
// {
|
||
// keys: '邮箱',
|
||
// values: '1234567@163.com'
|
||
// },
|
||
// {
|
||
// keys: '所属部门',
|
||
// values: '部门'
|
||
// },
|
||
// {
|
||
// keys: '机构名称',
|
||
// values: '某某机构'
|
||
// },
|
||
// {
|
||
// keys: '机构地址',
|
||
// values: '某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某'
|
||
// }
|
||
],
|
||
// 密码
|
||
password: localStorage.getItem('userPwd'),
|
||
// 密码显示状态
|
||
showPass: false,
|
||
// 设置密码窗口状态
|
||
showWinStatic: false,
|
||
userpwd: '',
|
||
userpwdQR: '',
|
||
// 收藏搜索
|
||
searchCollect: '',
|
||
// 收藏列表数据
|
||
// collect: [
|
||
// // {
|
||
// // name: '发的货接口的话接口io福达合金你接口撒环能科技河南地方撒即可',
|
||
// // database: '月度数据发的货接口的话接口io福达合金你接口撒环能科技河南地方撒即可',
|
||
// // birthTime: '2019-09-18',
|
||
// // staticInput: false
|
||
// // },
|
||
// // {
|
||
// // name: '1',
|
||
// // database: '月度数据',
|
||
// // birthTime: '2019-09-18',
|
||
// // staticInput: false
|
||
// // },
|
||
// // {
|
||
// // name: '1',
|
||
// // database: '月度数据',
|
||
// // birthTime: '2019-09-18',
|
||
// // staticInput: false
|
||
// // },
|
||
// // {
|
||
// // name: '1',
|
||
// // database: '月度数据',
|
||
// // birthTime: '2019-09-18',
|
||
// // staticInput: false
|
||
// // },
|
||
// // {
|
||
// // name: '1',
|
||
// // database: '月度数据',
|
||
// // birthTime: '2019-09-18',
|
||
// // staticInput: false
|
||
// // }
|
||
// ],
|
||
collect: null,
|
||
// 我的收藏名称
|
||
collectName: '',
|
||
// 分页配置
|
||
pageConfiguration: {
|
||
// 每页显示条数
|
||
oneSize: 5,
|
||
// 数据总条数
|
||
countSize: 36,
|
||
// 总页数
|
||
countPage: 1
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
clickStic (sta) {
|
||
this.staticSelect = sta
|
||
if (this.staticSelect === '我的收藏') {
|
||
this.getCollectData()
|
||
}
|
||
},
|
||
staticUp () {
|
||
this.showPass = !this.showPass
|
||
},
|
||
// 设置密码
|
||
closeLoginWind (status) {
|
||
if (status) {
|
||
// 调接口上传，成功后关闭窗口
|
||
if (this.userpwd === '') {
|
||
// alert('密码不能为空！')
|
||
this.$alert('密码不能为空！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
} else if (this.userpwdQR === '') {
|
||
// alert('确认密码不能为空！')
|
||
this.$alert('确认密码不能为空！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
} else if (this.userpwd !== this.userpwdQR) {
|
||
// alert('密码与确认密码不一致！')
|
||
this.$alert('密码与确认密码不一致！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
} else {
|
||
// 调接口判断密码是否输入正确,改变登录状态
|
||
this.$axios({
|
||
method: 'POST',
|
||
url: 'member/index/change-pwd',
|
||
data: {
|
||
'password_hash': this.userpwd,
|
||
password: this.userpwdQR
|
||
}
|
||
}).then(res => {
|
||
console.log(res)
|
||
// 请求接口完成 请求成功
|
||
this.$alert(res.data.message, '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
// alert(res.data.message)
|
||
if (res.data.code === 200) {
|
||
this.showWinStatic = !this.showWinStatic
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
}
|
||
} else {
|
||
this.showWinStatic = !this.showWinStatic
|
||
}
|
||
},
|
||
// 修改
|
||
updata () {
|
||
this.showWinStatic = !this.showWinStatic
|
||
},
|
||
// 编辑名称
|
||
editName (indexs) {
|
||
this.collect.forEach((item, index) => {
|
||
index === indexs ? (item.staticInput = true) : (item.staticInput = false)
|
||
})
|
||
},
|
||
// 文本框失去焦点或者回车enter
|
||
blurUpset (ids, names) {
|
||
let bStr = this.collectName === '' ? names : this.collectName
|
||
this.$axios({
|
||
method: 'POST',
|
||
url: 'member/index/edit',
|
||
data: {
|
||
id: ids,
|
||
name: bStr
|
||
}
|
||
}).then(res => {
|
||
console.log(res, 12569)
|
||
// 请求接口完成 请求成功
|
||
// alert(res.data.message)
|
||
if (res.data.code === 200) {
|
||
// alert('修改成功!')
|
||
this.$alert('修改成功!', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
console.log('文本框失去焦点')
|
||
// 调用接口修改数据
|
||
this.collect.forEach((item, index) => {
|
||
item.staticInput = false
|
||
})
|
||
this.getCollectData()
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 删除收藏数据
|
||
deleteData (ids) {
|
||
// 调用接口删除数据
|
||
this.$axios({
|
||
method: 'POST',
|
||
url: 'member/index/del',
|
||
data: {
|
||
id: ids
|
||
}
|
||
}).then(res => {
|
||
console.log(res, 1256000009)
|
||
// 请求接口完成 请求成功
|
||
// alert(res.data.message)
|
||
if (res.data.code === 200) {
|
||
// alert('删除成功!')
|
||
this.$alert('删除成功!', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
this.getCollectData()
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 获取收藏数据
|
||
getCollectData (pagess) {
|
||
// 调接口获取数据
|
||
console.log(this.pageConfiguration.countPage)
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'member/index/favorite',
|
||
params: {
|
||
page: pagess,
|
||
limit: 5,
|
||
key: this.searchCollect
|
||
}
|
||
}).then(res => {
|
||
console.log(res, 12569)
|
||
// 请求接口完成 请求成功
|
||
// alert(res.data.message)
|
||
if (res.data.code === 200) {
|
||
this.pageConfiguration.countSize = res.data.data.total
|
||
this.collect = res.data.data.list.map((item, index) => {
|
||
return {
|
||
name: item.name,
|
||
database: item.db,
|
||
birthTime: item.created_at,
|
||
staticInput: false,
|
||
adv: item.adv,
|
||
id: item.id,
|
||
classify_id: item.classify_id,
|
||
type: item.type,
|
||
uid: item.uid
|
||
}
|
||
})
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 获取个人中心数据
|
||
getPersonalCenter () {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'member/index/basic-setup',
|
||
params: {}
|
||
}).then(res => {
|
||
console.log(res, 12569)
|
||
// 请求接口完成 请求成功
|
||
// alert(res.data.message)
|
||
if (res.data.code === 200) {
|
||
let resdatares = [
|
||
{
|
||
keys: '用户名称',
|
||
values: '张三'
|
||
},
|
||
{
|
||
keys: '邮箱',
|
||
values: '1234567@163.com'
|
||
},
|
||
{
|
||
keys: '所属部门',
|
||
values: '部门'
|
||
},
|
||
{
|
||
keys: '机构名称',
|
||
values: '某某机构'
|
||
},
|
||
{
|
||
keys: '机构地址',
|
||
values: '某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某'
|
||
}
|
||
]
|
||
resdatares[0].values = res.data.data.username
|
||
resdatares[1].values = res.data.data.email
|
||
resdatares[2].values = res.data.data.company_dept
|
||
resdatares[3].values = res.data.data.company_name
|
||
resdatares[4].values = res.data.data.company_addr
|
||
this.cont_basic = resdatares
|
||
console.log(this.cont_basic, 'this.cont_basic')
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 当前页数发生改变时
|
||
currentChange (val) {
|
||
this.getCollectData(val)
|
||
console.log(val, '1010110')
|
||
},
|
||
// 跳转至查询页面
|
||
jumpSearch (listCount) {
|
||
console.log(listCount)
|
||
this.$route.push(
|
||
{
|
||
path: '/datasweb',
|
||
type: listCount.f,
|
||
defaultLeftId: listCount.classify_id
|
||
}
|
||
)
|
||
}
|
||
},
|
||
// 自定义指令v-*
|
||
directives: {
|
||
focus: {
|
||
inserted: function (el, { value }) {
|
||
// console.log(el, { value })
|
||
if (value) {
|
||
el.focus()
|
||
}
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
// 计算字符串
|
||
computedStr () {
|
||
return (str) => {
|
||
let Strs = ''
|
||
str.length <= 62 ? (Strs = str) : (Strs = str.slice(0, 61) + '...')
|
||
return Strs
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getPersonalCenter(1)
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
// 注册窗口
|
||
// 登陆窗口
|
||
.loginSty {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 10;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.28);
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
& > .loginSty_wcont {
|
||
width: 37.5rem;
|
||
height: 32.6875rem;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
& > .wcont_header {
|
||
width: 32.8125rem;
|
||
height: 3.875rem;
|
||
border-bottom: 0.0625rem solid #dbdbdb;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
& > div {
|
||
margin-left: 1rem;
|
||
font-size: 1.375rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
& > img {
|
||
margin-right: 1rem;
|
||
width: 1.3125rem;
|
||
height: 1.3125rem;
|
||
}
|
||
& > img:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
& > .wcont_content {
|
||
width: 30.8125rem;
|
||
height: 26.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
& > div:nth-last-child(n + 2) {
|
||
width: 100%;
|
||
height: 3.25rem;
|
||
border: 0.0625rem solid #dbdbdb;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
& > input {
|
||
width: 21.625rem;
|
||
height: 1.6rem;
|
||
border: none;
|
||
}
|
||
& > input::-webkit-input-placeholder {
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 2rem;
|
||
letter-spacing: 0rem;
|
||
color: #999999;
|
||
}
|
||
& > input::-moz-placeholder {
|
||
/* Mozilla Firefox 19+ */
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 2rem;
|
||
letter-spacing: 0rem;
|
||
color: #999999;
|
||
}
|
||
& > input:-moz-placeholder {
|
||
/* Mozilla Firefox 4 to 18 */
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 2rem;
|
||
letter-spacing: 0rem;
|
||
color: #999999;
|
||
}
|
||
& > input:-ms-input-placeholder {
|
||
/* Internet Explorer 10-11 */
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 2rem;
|
||
letter-spacing: 0rem;
|
||
color: #999999;
|
||
}
|
||
}
|
||
& > div {
|
||
& > img {
|
||
margin: 0 1.35625rem;
|
||
width: 1.0625rem;
|
||
height: 1.3125rem;
|
||
}
|
||
}
|
||
& > div:nth-last-child(1) {
|
||
width: 100%;
|
||
height: 3.1875rem;
|
||
background-color: #52b6e3;
|
||
border-radius: 0.3125rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #ffffff;
|
||
}
|
||
& > div:nth-last-child(1):hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.cont {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
& > .cont_content {
|
||
margin-bottom: 1.875rem;
|
||
width: 84.25rem;
|
||
// border: 0.0625rem solid red;
|
||
& > .header {
|
||
width: 84.25rem;
|
||
height: 4.25rem;
|
||
// border: 1px solid red;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
& > .left {
|
||
// margin-left: 1.5rem;
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0.125rem;
|
||
color: #000000;
|
||
}
|
||
& > .right {
|
||
// margin-right: 1.5rem;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #8fa3ae;
|
||
& > img {
|
||
width: 1rem;
|
||
height: 1.25rem;
|
||
margin-right: 0.45rem;
|
||
}
|
||
& > span:nth-child(n + 3):hover {
|
||
cursor: pointer;
|
||
color: #52b6e3;
|
||
}
|
||
}
|
||
}
|
||
& > .content {
|
||
width: 100%;
|
||
height: 33.75rem;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
& > .left {
|
||
width: 14.875rem;
|
||
display: flex;
|
||
height: 30.625rem;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
// border: 1px solid red;
|
||
border-right: 0.125rem solid #dbdbdb;
|
||
& > div {
|
||
width: 14.875rem;
|
||
height: 2.75rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 22px;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
& > .active {
|
||
background-color: #f5f5f5;
|
||
border-right: 0.125rem solid #52b6e3;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
& > .right {
|
||
width: 100%;
|
||
// margin-left: 7.5rem;
|
||
height: 30.625rem;
|
||
& > .right_title {
|
||
margin-left: 7.5rem;
|
||
width: 53.875rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 2.125rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
& > .right {
|
||
width: 16rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
& > input {
|
||
width: 10.75rem;
|
||
height: 2.25rem;
|
||
border-radius: 0.3125rem;
|
||
border: solid 0.125rem #dbdbdb;
|
||
}
|
||
& > div {
|
||
width: 3.625rem;
|
||
height: 2.25rem;
|
||
background-color: #52b6e3;
|
||
border-radius: 0.3125rem;
|
||
font-size: 1.125rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 39px;
|
||
letter-spacing: 0rem;
|
||
color: #ffffff;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
& > .right_cont_basic {
|
||
margin-left: 7.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
& > div {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
& > div:nth-child(1) {
|
||
width: 7.5rem;
|
||
height: 4.375rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
& > div:nth-child(2) {
|
||
// border: 1px solid red;
|
||
width: 38.75rem;
|
||
height: 4.375rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
& > .right_cont_fafety {
|
||
margin-left: 7.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
& > .conty {
|
||
width: 38.75rem;
|
||
height: 4.375rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
& > div:nth-child(1) {
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
& > div:nth-child(2) {
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #52b6e3;
|
||
}
|
||
& > div:nth-child(2):hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
& > .contys {
|
||
width: 38.75rem;
|
||
height: 4.375rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
& > div {
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
& > img {
|
||
margin-left: 1.5rem;
|
||
width: 2.875rem;
|
||
height: 1.875rem;
|
||
}
|
||
& > img:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
& > .right_cont_collect {
|
||
margin-top: 1.625rem;
|
||
margin-left: calc((100% - 61.75rem) / 2);
|
||
width: 61.75rem;
|
||
// border: 1px solid red;
|
||
& > .collect_yes {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
& > .content {
|
||
width: 100%;
|
||
& > .header {
|
||
width: 100%;
|
||
height: 3.5rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
font-size: 1.375rem;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
border-bottom: 0.0625rem solid #bdbdbd;
|
||
& > div:nth-child(1) {
|
||
width: 6rem;
|
||
// border: 1px solid red;
|
||
}
|
||
& > div:nth-child(n + 2) {
|
||
width: 14rem;
|
||
// border: 1px solid red;
|
||
}
|
||
& > div {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
& > .cont {
|
||
width: 100%;
|
||
|
||
& > div {
|
||
width: 100%;
|
||
height: 3.5rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
font-size: 1.375rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #666666;
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
}
|
||
& > div:nth-child(1) {
|
||
width: 6rem;
|
||
// border: 1px solid red;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1; /* 省略号在第几行 */
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
& > div:nth-child(2) {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1; /* 省略号在第几行 */
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
& > div:nth-child(n + 2) {
|
||
width: 14rem;
|
||
}
|
||
& > div {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
& > .handle {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
& > div {
|
||
margin: 0 0.75rem;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
color: #52b6e3;
|
||
}
|
||
}
|
||
}
|
||
& > div:nth-last-child(n + 2) {
|
||
border-bottom: 0.0625rem solid #bdbdbd;
|
||
}
|
||
}
|
||
}
|
||
& > .pagination {
|
||
margin-top: 2.285rem;
|
||
}
|
||
}
|
||
& > .collect_no {
|
||
width: 100%;
|
||
height: 24rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 2.125rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #bdbdbd;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
& > .cont_content_basic {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
height: 38rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style>
|