Skip to content

O
office-web-js
Commit b404494f by qinjianhui
Options

feat: 多彩晶闪

parent c27d10b4
Showing with 350 additions and 1 deletions
src/styles/icon.scss
.icon-arrow-left {
background-size: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAAXNSR0IArs4c6QAAAtxJREFUeAHt3M9KG1EUx/G5IVakbtz230asbyDYB5BC132LYrFv0BcQC32CLt2LUChIoXTp2q1poNAUCnXRGjSdUabEo5zdOff8+QWiud7gyXw/TjYOKae7m7MGt2oFBtUmY/BVgWHf4cmbr6V/jO/yBfp3HpwB8q3ZCQBg88hvAkC+MTsBAGwe+U0AyDdmJwCAzSO/CQD5xuwEALB55DcBIN+YnQAANo/8JgDkG7MTAMDmkd8EgHxjdgIA2DzymwCQb8xOAACbR34TAPKN2Qn//yPGPsvx5mj/5dLieLxOD+F8YWn06NWnn/Tn2uvQAN8/bN2ffhuf/GlmD+fDlqZMlqcXa/M/q/U47FvQVfzJ2cnsrvjl3trKztGvWtHn54YE8BK/gwgH4Cl+OABv8UMBeIwfBsBr/BAAnuO7B/Ae3zVAhPhuAaLEdwkQKb47gGjxXQFEjO8GIGp8FwCR45sHiB7fNECG+GYBssQ3CZApvjmAbPFNAWSMbwYga3wTAJnjVwfIHr8qAOJ3+Zum2pVx08nv4/ZzcugVa3+XDV00dZ1I9mu964LK4HV7aDc+q6i9im3xrJy/lT1kW7+9GsDjnS+HpQxe3EK4nG2P9p69s5VJ7tVUA+gOCQgGLk3MjlD1DOhP7MwIJgAyvx2ZAciKYAogI4I5gGwIJgEyIZgFyIJgGiADgnmA6AguACIjuAGIiuAKICKCO4BoCC4BIiG4BYiC4BogAoJ7AO8IIQA8I4QB8IoQCsAjQjgAbwghATwhhAXoEYbDhefth/QdzN+by2b1x/uNp91zat+qXRuqdeAPtj9/bGd1d5O30GeAyeLkRQGABNFeAkC7OJkHABJEewkA7eJkHgBIEO0lALSLk3kAIEG0lwDQLk7mAYAE0V4CQLs4mQcAEkR7CQDt4mQeAEgQ7SUAtIuTeQAgQbSXANAuTuYBgATRXpbT3c0bn1ii/QKyz8MZUPkv4B9ziynbuPRX8gAAAABJRU5ErkJggg==);
}
.icon-thumb {
background-size: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAbCAYAAABiFp9rAAAAAXNSR0IArs4c6QAAAdhJREFUSA3tlc9LAlEQx2c2UxKMrp6CwExNQ7cQ+gH9AfUHBOV/0SWoQwcpunbyaNHFjtWpgxB0qRWRIqhrIAiGQRD5Y18zarKK69s97K0HC++9efP97MzOzkOwOSLxZLjRaJ4KEMsI+AEI2fG5mYPnXK4+SmpslHHQpqqq97uuPxIkSjYXPT56VvVqzV2tlG8HzxvXinEhm381cIsgfgR4mPTgFAButH0EpGS+/FaWhxB6R1DBjKZpn+R4HZhPAMNlIpYjCsWXp4WANRL88Sq+S5nwoN0yqNmqb5MzZQ2uisV8bVBItrYMQiF2WAwRz2Wiw+yWQIGYmhRCBLmcqZRvhgnJ9qSg8MJShKLJsJAAOJP9L2ZAF1UN+ZuPRqvVMSK+T6AnbXbSqEORl6kSH1GBk9dS4Y59pBGRU5U+zIXbDSul0n3FDGTc75b7ptAhPxtL7LEN/97k7anAFdUbZvu9AyMmIVX163VI0Xc9pHS5KLJ1Wz/sCO0+04umlWnjOBhVgWBHFNmuNHV9CjYXihuy7ELpX3QU1I2s3aIcBRkT8A8yZsPW/D91ttJlPOxo6rgVMYybrKMg7ncM4k7uSK8zNlXi6Hxd9Lo3kx0YDNmnOyntSETDLr5fqlCe7ANE7CkAAAAASUVORK5CYII=);
}
.icon-thumb-gold {
background-size: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAbCAYAAABiFp9rAAAAAXNSR0IArs4c6QAAAexJREFUSA1jZCARPJ9kq/Xnz98p/xkZrIBa3zEyMCySkZauYwxb/QufUSz4JNHlns305fr97e0eBob/kgz/wbKSQKr8ydOnIE4FunpkPhMyhxD77/d3kQz//0uyCSsySEdMZRBxzAdrAVoWR0gvSRYBLQEbyK1qz8DEysnAKaMPMR9oOdUsejbFSh4YZLYMzCwMXPImhMzFkCfaR/9+M8T8/8/AyCmtz8DExoVhECEBoi0CxkMsyDAuJUtCZmKVJ8qixxNszP///6/OxMbNwCmth9UgQoIELXreZ63N8P/vLJBBXMpWDIxMJOUIuP0sj/osgaGCG/xm+AdMAwwMzFyCDHw63jgVopjDyPgcqOkMy3+mbqmio4dBmgj6iImdh4FLwZxBzKOKgZmDD6dFKBKg5P6fwfcvw78DT/qsq0ByjDCXyMbOQ1H7eHESmI8ujqIIB+fvtw8MX+8fY/h4YQMD478//5gZmBwI+giHWXiFmbkEGPi0vRj4DQJAoc70h/FfKU0sgrmCWxFU7oIAowlNLQL5DAyAcUZTiyC2QMhRi5BDgyT2aNCRFFzIimkadKCiCAyAhSxNLQKVdxAALMmhLKpSKIUqA8M/ZmB1AS+9qWoT1DBg4/IfIwNTrUzR0Taa+IgBWvGBfAKr+AAgLYr8RyyZ+gAAAABJRU5ErkJggg==);
}
\ No newline at end of file
src/views/Home/ColorfulPage.vue
<template>
<div class="colorful-page">多彩 Joshine</div>
<div class="colorful-page">
<div class="main-image">
<img src="~@/assets/colorful/main.jpg" alt="多彩晶闪" />
<span class="main-image-text">COLORFUL JOSHINE</span>
</div>
<div class="articles-area">
<div class="article-categories">
<router-link
v-for="c in categories"
:key="c.type"
:to="`/colorful?category=${c.type}`"
class="article-category"
:class="{ active: c === activeCategory }"
>{{ c.title }}</router-link
>
</div>
<div
v-if="activeCategory"
class="articles-list"
:class="`articles-list-${activeCategory.layout}`"
>
<article v-for="(a, i) in articlesList" :key="i" class="article-item">
<div class="article-img">
<img class="cover-parent" :src="a.img" :alt="a.title" />
</div>
<h4 class="article-title">{{ a.title }}</h4>
<div class="article-brief">
{{ a.brief }}
<a class="article-link" href="javascript:;">查看全文 +</a>
</div>
<div class="article-meta">
<span class="article-time">{{ a.createdAt }}</span>
<a class="article-like" href="javascript:;">
<i
class="article-like-icon"
:class="a.liked ? 'icon-thumb-gold' : 'icon-thumb'"
></i>
<span class="article-like-count">{{ a.likeCount }}</span>
</a>
</div>
</article>
</div>
</div>
</div>
</template>
<script>
import ImgArticle1 from '@/assets/colorful/a-1.png'
import ImgArticle2 from '@/assets/colorful/a-2.jpg'
import ImgArticle3 from '@/assets/colorful/a-3.png'
import ImgArticle4 from '@/assets/colorful/a-4.jpg'
import ImgArticle5 from '@/assets/colorful/a-5.jpg'
import ImgArticle6 from '@/assets/colorful/a-6.png'
import ImgArticle7 from '@/assets/colorful/a-7.png'
export default {
name: 'ColorfulPage',
data() {
return {
categories: [
{ type: 'big-event', title: '晶闪大事件', layout: 'flow' },
{ type: 'employee-activity', title: '员工活动', layout: 'grid' },
],
articles: [
{
categories: ['big-event'],
img: ImgArticle1,
title: '2023晶闪科技春季校园招聘正式启动',
brief: '2023晶闪科技春季校园招聘正式启动！',
createdAt: '2023-01-01 12:34:56',
likeCount: Math.round(Math.random() * 1000),
liked: Math.random() > 0.5,
},
{
categories: ['big-event'],
img: ImgArticle2,
title: '携手并进·筑梦未来丨2023年晶闪科技供应商大会',
brief:
'2022年，我们回归初心；2023年，我们展望未来。让我们在这新的一年里，携手共进，筑梦未来！',
createdAt: '2023-01-02 13:24:57',
likeCount: Math.round(Math.random() * 1000),
liked: Math.random() > 0.5,
},
{
categories: ['big-event', 'employee-activity'],
img: ImgArticle3,
title: '万圣节 | 冲刺月前夕的动员狂欢',
brief:
'对于跨境电商领域的我们来说，万圣节之后即将开启的十一月，是一个非常特殊的月份。春种长期战，秋收亿亿万，想要年底不吃土，就要全力拼黑五！要想钱包不空虚，就要闷头冲网一！',
createdAt: '2022-10-30 13:24:57',
likeCount: Math.round(Math.random() * 1000),
liked: Math.random() > 0.5,
},
{
categories: ['big-event'],
img: ImgArticle4,
title: '速报 | NC荣获2020年BrandZ中国最具潜力全球化品牌15强',
brief: 'NC荣获2020年BrandZ中国最具潜力全球化品牌15强',
createdAt: '2023-01-02 13:24:57',
likeCount: Math.round(Math.random() * 1000),
liked: Math.random() > 0.5,
},
{
categories: ['employee-activity'],
img: ImgArticle5,
title: 'CEO私房话 | 第二期-产研小哥的爱恨情仇',
brief: '嘘！这些悄悄话只说给宁缺听！',
createdAt: '2023-01-02 13:24:57',
likeCount: Math.round(Math.random() * 1000),
liked: Math.random() > 0.5,
},
{
categories: ['employee-activity'],
img: ImgArticle6,
title: '感恩节 | “感谢大声说出口”留言征集活动',
brief: '感谢打开这篇文章的你~',
createdAt: '2023-01-02 13:24:57',
likeCount: Math.round(Math.random() * 1000),
liked: Math.random() > 0.5,
},
{
categories: ['employee-activity'],
img: ImgArticle7,
title: '生日会 | 7月生辰 快哉乐哉',
brief: '真的不和我说生日快乐吗？不然下次要再365天了噢～',
createdAt: '2022-07-01 00:00:01',
likeCount: Math.round(Math.random() * 1000),
liked: Math.random() > 0.5,
},
],
articlesList: [],
}
},
computed: {
activeCategory() {
const c = this.$route.query.category
return this.categories.find((e) => e.type === c)
},
},
watch: {
activeCategory: {
immediate: true,
handler() {
if (!this.activeCategory) return
this.articlesList = this.articles.filter((e) =>
e.categories.includes(this.activeCategory.type)
)
},
},
},
created() {
if (!this.activeCategory) {
if (this.categories.length) {
this.$router.push(`/colorful?category=${this.categories[0].type}`)
}
}
},
}
</script>
<style lang="scss" scoped>
.main-image {
font-size: 0;
position: relative;
user-select: none;
.main-image-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 28px;
color: #fff;
letter-spacing: 8px;
font-weight: 100;
}
img {
width: 100%;
}
}
.articles-area {
width: 70%;
margin: 40px auto;
display: flex;
align-items: flex-start;
}
.article-categories {
width: 25%;
white-space: nowrap;
display: flex;
flex-direction: column;
margin-right: 30px;
}
.article-category {
display: block;
transition: 0.3s;
text-decoration: none;
padding: 22px 0;
text-align: center;
color: #000;
border: solid 1px #dfdfdf;
&:not(:last-child) {
border-bottom: none;
}
&.active {
color: #fff;
background-color: #e28e39;
}
}
.articles-list {
display: flex;
flex-wrap: wrap;
flex: 1;
}
.articles-list-flow {
.article-item {
width: 100%;
height: 10vw;
display: grid;
grid-template-columns: 15vw 3fr;
grid-template-rows: auto 1fr auto;
padding-bottom: 30px;
margin-bottom: 30px;
column-gap: 20px;
&:not(:last-child) {
border-bottom: solid 1px #e4e4e4;
}
}
.article-img {
grid-column: 1 / 1;
grid-row: 1 / 4;
}
.article-title {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.article-meta {
grid-column: 2 / 3;
grid-row: 3 / 4;
}
}
.articles-list-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
.article-item {
border: solid 1px #efefef;
}
.article-img {
padding-top: 61%;
margin-bottom: 20px;
}
.article-title,
.article-brief,
.article-meta {
padding-left: 20px;
padding-right: 20px;
}
.article-brief {
min-height: 60px;
margin-bottom: 20px;
}
.article-meta {
margin-bottom: 20px;
}
}
.article-img {
position: relative;
& > img {
object-fit: cover;
}
}
.article-title {
margin: 0 0 10px;
font-weight: normal;
color: #323232;
font-size: 16px;
}
.article-brief {
font-size: 14px;
color: #999;
line-height: 30px;
}
.article-link {
color: #323232;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
.article-meta {
display: flex;
justify-content: space-between;
}
.article-time {
font-size: 14px;
color: #999;
}
.article-like {
font-size: 14px;
color: #323232;
display: flex;
align-items: center;
text-decoration: none;
}
.article-like-icon {
display: block;
width: 20px;
height: 20px;
margin-right: 8px;
}
</style>
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