Skip to content

J
jinfa-platform
Commit b5a89cc6 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:新增收藏管理和修改资讯页面样式

parent 033ae536
Hide whitespace changes
Inline Side-by-side
Showing with 552 additions and 64 deletions
config/routes/authConfigRoute.ts
View file @ b5a89cc6
......@@ -40,6 +40,11 @@ const AuthConfigRoute = {
hidePageHeader: true
},
]
},
{
path: '/memberCenter/systemSetting/collection',
name: 'collection',
component: '@/pages/systemSetting/collection',
}
],
......
src/global/styles/reset.less
View file @ b5a89cc6
......@@ -7,6 +7,10 @@
display: none;
}
.ant-pro-global-footer {
margin: 8px auto 32px auto;
}
.common_checkbox {
&:hover,
......
src/locales/zh-CN/menu.ts
View file @ b5a89cc6
......@@ -199,10 +199,12 @@ export default {
// 权限管理
'menu.systemSetting': '系统',
'menu.systemSetting.authConfig': '平台权限',
'menu.systemSetting.authConfig': '权限管理',
'menu.systemSetting.authConfig.organ': '组织机构',
'menu.systemSetting.authConfig.memberSystem': '角色管理',
'menu.systemSetting.authConfig.memberDetail': '角色详情',
'menu.systemSetting.authConfig.userSystem': '用户管理',
'menu.systemSetting.authConfig.userDetail': '用户详情',
'menu.systemSetting.collection': '收藏管理',
};
\ No newline at end of file
src/pages/lxMall/information/common.less
View file @ b5a89cc6
......@@ -22,6 +22,34 @@
}
}
.information_tabs {
position: relative;
color: #333333;
font-size: 14px;
position: relative;
background-color: #F5F5F5;
height: 40px;
line-height: 40px;
display: flex;
&_item {
height: 40px;
display: flex;
align-items: center;
padding: 0 15px;
cursor: pointer;
&.active {
background-color: var(--mall_main_color);
color: #ffffff;
}
&:hover {
background-color: var(--mall_main_color);
color: #ffffff;
}
}
}
.common_background() {
......
src/pages/lxMall/information/index.less
View file @ b5a89cc6
......@@ -24,6 +24,7 @@
margin-right: 4px;
.information_focus_imgbox_main {
position: relative;
&_img {
width: 598px;
......@@ -32,11 +33,59 @@
transition: all 1s;
.common_background();
}
&_title {
position: absolute;
z-index: 6;
color: #ffffff;
bottom: 30px;
padding: 0 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24px;
margin-bottom: 0;
}
}
:global {
.ant-carousel .slick-dots-bottom {
bottom: 12px;
justify-content: flex-start;
margin: 0;
margin-left: 15px;
}
.ant-carousel .slick-dots li {
width: 4px;
height: 4px;
&.slick-active {
width: 12px;
height: 4px;
border-radius: 3px;
button {
width: 12px;
height: 4px;
border-radius: 3px;
}
}
button {
width: 4px;
height: 4px;
}
}
}
}
&_right {
.information_focus_imgbox_sub_1 {
position: relative;
&_img {
width: 598px;
height: 220px;
......@@ -44,11 +93,26 @@
}
}
.information_focus_imgbox_sub_title {
position: absolute;
z-index: 6;
color: #ffffff;
bottom: 20px;
padding: 0 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
margin-bottom: 0;
}
.information_focus_sub_bottom {
display: flex;
margin-top: 4px;
.information_focus_imgbox_sub_2 {
position: relative;
&:not(:last-child) {
margin-right: 4px;
}
......
src/pages/lxMall/information/index.tsx
View file @ b5a89cc6
......@@ -115,15 +115,17 @@ const Information: React.FC<InformationPropsType> = (props) => {
<BreadCrumbs />
<div className={styles.information_focus}>
<div className={styles.information_focus_left}>
<Carousel className={styles.information_focus_carousel} pauseOnDotsHover>
<Carousel className={styles.information_focus_carousel} autoplay={true} pauseOnDotsHover>
<div className={styles.information_focus_carousel_item}>
<div className={styles.information_focus_imgbox_main}>
<div className={styles.information_focus_imgbox_main_img} style={{ backgroundImage: `url(${informationImg1})` }} />
<p className={styles.information_focus_imgbox_main_title}>高分七号卫星上岗！大美图像惊艳亮相</p>
</div>
</div>
<div className={styles.information_focus_carousel_item}>
<div className={styles.information_focus_imgbox_main}>
<div className={styles.information_focus_imgbox_main_img} style={{ backgroundImage: `url(${informationImg2})` }} />
<p className={styles.information_focus_imgbox_main_title}>高分七号卫星上岗！大美图像惊艳亮相</p>
</div>
</div>
</Carousel>
......@@ -131,81 +133,27 @@ const Information: React.FC<InformationPropsType> = (props) => {
<div className={styles.information_focus_right}>
<div className={styles.information_focus_imgbox_sub_1}>
<div className={styles.information_focus_imgbox_sub_1_img} style={{ backgroundImage: `url(${informationImg2})` }} />
<p className={styles.information_focus_imgbox_sub_title}>高分七号卫星上岗！大美图像惊艳亮相</p>
</div>
<div className={styles.information_focus_sub_bottom}>
<div className={styles.information_focus_imgbox_sub_2}>
<div className={styles.information_focus_imgbox_sub_2_img} style={{ backgroundImage: `url(${informationImg1})` }} />
<p className={styles.information_focus_imgbox_sub_title}>高分七号卫星上岗！大美图像惊艳亮相</p>
</div>
<div className={styles.information_focus_imgbox_sub_2}>
<div className={styles.information_focus_imgbox_sub_2_img} style={{ backgroundImage: `url(${informationImg1})` }} />
<p className={styles.information_focus_imgbox_sub_title}>高分七号卫星上岗！大美图像惊艳亮相</p>
</div>
</div>
</div>
</div>
<div className={styles.information_wrap}>
<div className={styles.information_left}>
{
MockList.map(item => (
<Fragment key={item.id}>
<div className={styles.information_title}>
<span>{item.title}</span>
</div>
<div className={styles.information_common}>
<div className={styles.information_common_left}>
<ImageBox width={360} height={240} imgUrl={informationImg2} />
<p className={styles.information_common_title}>
<Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案，如何实现全网整合</Link>
</p>
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>2019-09-25</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>11,245</span>
</div>
</div>
<p className={styles.information_common_content}>优秀的B2B电商商城平台开发公司除了提供搭建电商系统的服务之外，更应该为客户制定一套合理的电商系统</p>
<div className={styles.information_common_tag_list}>
<div className={styles.information_common_tag_list_item}>电商系统开发方案</div>
<div className={styles.information_common_tag_list_item}>b2b网站建设</div>
<div className={styles.information_common_tag_list_item}>供应链管理系统</div>
</div>
</div>
<div className={styles.information_common_right}>
<div className={styles.information_common_news_list}>
{
item.list.map(childImte => (
<div className={styles.information_common_news_list_item} key={childImte.id}>
<ImageBox imgUrl={informationImg2} />
<div className={styles.information_common_news_list_item_main}>
<p className={styles.information_common_news_list_item_main_content}>
<Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案，如何实现全网整合</Link>
</p>
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>2019-09-25</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>11,245</span>
</div>
</div>
</div>
</div>
))
}
</div>
</div>
</div>
</Fragment>
))
}
<div className={styles.information_title}>
<span>最新发布</span>
<div className={styles.information_tabs}>
<div className={cx(styles.information_tabs_item, styles.active)}>今日热点</div>
<div className={styles.information_tabs_item}>行业头条</div>
<div className={styles.information_tabs_item}>专题报道</div>
<div className={styles.information_tabs_item}>政策法规</div>
</div>
<div className={styles.information_latest_release_list}>
<div className={styles.information_latest_release_list_item}>
......
src/pages/systemSetting/collection/commodity.tsx 0 → 100644
View file @ b5a89cc6
import React from 'react'
import styles from './index.less'
const Commodity: React.FC = () => {
return (
<div>
Commodity
</div>
)
}
export default Commodity
src/pages/systemSetting/collection/index.less 0 → 100644
View file @ b5a89cc6
.collection_wrap {
position: relative;
background: #ffffff;
border-radius: 8px;
min-height: 74vh;
padding: 0 24px;
.collection_tabs {
position: relative;
:global {
.ant-tabs-nav::before {
display: none;
}
}
}
}
.pagination_wrap {
text-align: right;
margin-top: 24px;
padding-bottom: 32px;
}
.shops_list {
&_item {
position: relative;
display: flex;
margin-bottom: 16px;
&_item {
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
&.morehalf {
flex: 1.5;
}
.shop_header_info {
position: relative;
display: flex;
&_logo {
border-radius: 4px;
overflow: hidden;
width: 72px;
height: 72px;
margin-right: 16px;
&>img {
width: 72px;
height: 72px;
}
}
&_content {
position: relative;
&_name {
font-size: 14px;
color: #333333;
font-weight: 500;
}
&_about {
display: flex;
margin-top: 10px;
&_item {
// flex: 1;
display: flex;
align-items: center;
margin-right: 16px;
&>span {
font-size: 14px;
color: #333333;
line-height: 20px;
&.red {
color: #D32F2F;
margin-right: 4px;
}
}
&>.icon {
position: relative;
top: -1px;
overflow: hidden;
margin-right: 5px;
&>img {
width: 20px;
height: 20px;
}
}
}
}
&_icon {
color: #cccccc;
font-size: 12px;
margin-left: 6px;
}
}
}
.date {
color: #909399;
font-size: 12px;
}
.collection_state {
font-size: 14px;
color: #00B37A;
cursor: pointer;
&>label {
margin-left: 4px;
cursor: pointer;
}
}
.rate_wrap {
font-size: 12px;
:global {
.ant-rate {
font-size: 14px;
}
}
}
.level_icon {
width: 54px;
height: 16px;
margin-bottom: 4px;
display: block;
background-size: 100% 100%;
background-repeat: no-repeat;
&.level3 {
background-image: url(/static/imgs/level2@2x.png);
}
}
}
}
}
.information_list {
&_item {
position: relative;
display: flex;
margin-bottom: 16px;
&_item {
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
&.morehalf {
flex: 4;
}
.information_header_info {
position: relative;
display: flex;
&_logo {
border-radius: 4px;
overflow: hidden;
width: 108px;
height: 72px;
margin-right: 16px;
&>img {
width: 108px;
height: 72px;
}
}
&_content {
position: relative;
&_name {
font-size: 14px;
color: #333333;
font-weight: 500;
height: 44px;
line-height: 22px;
max-width: 375px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
word-wrap: break-word;
word-break: break-all;
}
&_about {
display: flex;
margin-top: 6px;
&_item {
// flex: 1;
display: flex;
align-items: center;
margin-right: 16px;
font-size: 12px;
color: #999999;
&>span {
margin-left: 4px;
}
}
}
&_icon {
color: #cccccc;
font-size: 12px;
margin-left: 6px;
}
}
}
.date {
color: #909399;
font-size: 12px;
}
.collection_state {
font-size: 14px;
color: #00B37A;
cursor: pointer;
&>label {
margin-left: 4px;
cursor: pointer;
}
}
}
}
}
\ No newline at end of file
src/pages/systemSetting/collection/index.tsx 0 → 100644
View file @ b5a89cc6
import React from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import Commodity from './commodity'
import Infomation from './information'
import Shops from './shops'
import { Tabs } from 'antd'
import styles from './index.less'
const { TabPane } = Tabs
const Collection: React.FC = () => {
return (
<PageHeaderWrapper>
<div className={styles.collection_wrap}>
<Tabs defaultActiveKey="information" className={styles.collection_tabs} >
<TabPane tab="商品收藏" key="commodity">
<Commodity />
</TabPane>
<TabPane tab="店铺收藏" key="shops">
<Shops />
</TabPane>
<TabPane tab="资讯收藏" key="information">
<Infomation />
</TabPane>
</Tabs>
</div>
</PageHeaderWrapper>
)
}
export default Collection
\ No newline at end of file
src/pages/systemSetting/collection/information.tsx 0 → 100644
View file @ b5a89cc6
import React from 'react'
import cx from 'classnames'
import { Pagination } from 'antd'
import { StarFilled, EyeOutlined, ClockCircleOutlined } from '@ant-design/icons'
import styles from './index.less'
const Information: React.FC = () => {
let infomationList = Array.apply({}, new Array(7))
return (
<>
<div className={styles.information_list}>
{
infomationList.map((item, index) => (
<div className={styles.information_list_item} key={`information_list_item_${index}`}>
<div className={cx(styles.information_list_item_item, styles.morehalf)}>
<div className={styles.information_header_info}>
<div className={styles.information_header_info_logo}>
<img src="https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/69f3f329d5a848119dc89029a10acb081600332395671.jpg" />
</div>
<div className={styles.information_header_info_content}>
<div className={styles.information_header_info_content_name}>
<span>B2B供应链电商系统平台解决方案，如何实现全网整合全网</span>
</div>
<div className={styles.information_header_info_content_about}>
<div className={styles.information_header_info_content_about_item}>
<ClockCircleOutlined />
<span>2019-09-25</span>
</div>
<div className={styles.information_header_info_content_about_item}>
<EyeOutlined />
<span>11,245</span>
</div>
</div>
</div>
</div>
</div>
<div className={cx(styles.information_list_item_item)}>
<span className={styles.date}>2020-10-25 10:58</span>
</div>
<div className={cx(styles.information_list_item_item)}>
<div className={cx(styles.collection_state)}>
<StarFilled />
<label>收藏</label>
</div>
</div>
</div>
))
}
</div>
<div className={styles.pagination_wrap}>
<Pagination showSizeChanger={false} defaultCurrent={1} total={100} />
</div>
</>
)
}
export default Information
src/pages/systemSetting/collection/shops.tsx 0 → 100644
View file @ b5a89cc6
import React from 'react'
import cx from 'classnames'
import { Rate, Pagination } from 'antd'
import { StarFilled } from '@ant-design/icons'
import shop_icon from '@/assets/imgs/shop_icon.png'
import credit_icon from '@/assets/imgs/credit_icon.png'
import styles from './index.less'
const Shops: React.FC = () => {
let shopList = Array.apply({}, new Array(7))
return (
<>
<div className={styles.shops_list}>
{
shopList.map((item, index) => (
<div className={styles.shops_list_item} key={`shops_list_item_${index}`}>
<div className={cx(styles.shops_list_item_item, styles.morehalf)}>
<div className={styles.shop_header_info}>
<div className={styles.shop_header_info_logo}>
<img src="https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/69f3f329d5a848119dc89029a10acb081600332395671.jpg" />
</div>
<div className={styles.shop_header_info_content}>
<div className={styles.shop_header_info_content_name}>
<span>温州市龙昌皮业有限公司</span>
</div>
<div className={styles.shop_header_info_content_about}>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={shop_icon} /></i>
<span className={styles.red}>2</span>
<span>年</span>
</div>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>1288</span>
</div>
</div>
</div>
</div>
</div>
<div className={cx(styles.shops_list_item_item)}>
<i className={cx(styles.level_icon, styles.level3)}></i>
<div className={styles.rate_wrap}>
<span>满意度：</span>
<Rate disabled defaultValue={2} />
</div>
</div>
<div className={cx(styles.shops_list_item_item)}>
<span className={styles.date}>2020-10-25 10:58</span>
</div>
<div className={cx(styles.shops_list_item_item)}>
<div className={cx(styles.collection_state)}>
<StarFilled />
<label>收藏</label>
</div>
</div>
</div>
))
}
</div>
<div className={styles.pagination_wrap}>
<Pagination showSizeChanger={false} defaultCurrent={1} total={100} />
</div>
</>
)
}
export default Shops
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment