對很多人來說是個特殊的日子，今天，是2022年的第一天，相信昨晚大家的朋友圈和微信群已經(jīng)被送上了大量的祝福，我也是回了一趟家，陪家人渡過這一美好的節(jié)日，不過，晚上覺得無聊還是得來敲一敲代碼，順便在這里為大家送上美好的祝福，好了，直接上效果圖：
效果圖
這個案例沒什么難度，就是把鼠標(biāo)放到相應(yīng)的語句上，就會展開，右邊的文本和圖片。
其中紅色框里的文字是豎起來的，它是通過設(shè)置<p>標(biāo)簽的writing-mode: vertical-rl;屬性來完成的。
差不多就這樣，好了，上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022年美好祝福</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
<div class="big-box">
<ul>
<li class="show" v-for='(item,index) in bless'>
<div class="endways">
<div class="title">
<p>{{item.sentence}}</p>
</div>
<div class="text">
<ul>
<li>
<p v-for='(text,demo) in item.text'>{{text}}</p>
<button>{{item.idiom}}</button>
</li>
</ul>
<div class="img-box">
<img v-for='(image,imageindex) in item.src' :src="image" alt="">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="../../js/vue.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.big-box {
width: 80%;
height: 500px;
margin: 50px auto;
}
.big-box ul {
width: 100%;
height: 100%;
margin: 0 50px;
overflow: hidden;
}
.big-box ul .show {
float: left;
width: 50px;
height: 100%;
overflow: hidden;
margin-left: 10px;
transition: all 1s;
}
.big-box ul .show:hover {
width: 600px;
}
.endways {
width: 600px;
height: 100%;
}
.endways .title {
float: left;
width: 50px;
height: 100%;
background-color: rgb(250, 96, 96);
position: relative;
}
.endways .title p {
width: 30px;
font-size: 18px;
position: absolute;
bottom: 20px;
writing-mode: vertical-rl;
color: white;
margin: 10px;
}
.endways .text {
float: left;
width: 550px;
height: 96%;
background-color: rgb(255, 255, 255);
margin: 2% 0;
box-shadow: 0 0 8px rgba(139, 139, 139, 0.4)
}
.endways .text .img-box {
float: left;
width: 160px;
height: 100%;
margin-left: 30px;
overflow: hidden;
}
.endways .text .img-box img {
width: 160px;
min-height: 30%;
box-shadow: 0 0 2px rgba(51, 51, 51, 0.4);
margin: 0 auto;
}
.endways .text ul {
float: left;
width: 350px;
height: 100%;
margin: 0;
overflow: hidden;
margin-left: 10px;
}
.endways .text ul li p {
margin: 14px 0;
padding: 0;
font-size: 14px;
font-weight: 520;
}
.endways .text ul li button {
width: 100px;
height: 40px;
border-radius: 50px;
color: white;
font-size: 16px;
background-color: rgb(255, 97, 150);
border: 0;
margin-top: 40px;
cursor: pointer;
box-shadow: 0 2px 2px rgba(139, 139, 139, 0.2)
}
Vue.config.productionTip = false //阻止vue在啟動時生成生產(chǎn)提示
new Vue({
el: '#app',
data: {
bless: [{
sentence: '2022年美好祝愿:元旦快樂',
text: ['1.溪水不知道為什么總要流向大海，蝴蝶不知道為什么總要在空中飛舞，我不知道為什么短信總要發(fā)送給你。可能是元旦到了的緣故吧，祝你元旦節(jié)快樂。',
'2.有一抹色彩叫做陽光，有一種味道叫做溫馨，有一款裝飾叫做心意，有一份祝福叫做平安，朋友，元旦快樂，健康幸福。',
'3.元旦到，祝你上班偷偷傻笑，下班活蹦亂跳，嘴里哼著小調(diào)，不知不覺跑調(diào)，早上嘰哩呱啦亂叫，晚上唏哩呼嚕睡覺，醒來一看嚇一跳，枕邊全是鈔票。',
'4.元旦快樂，我的朋友！愿你：年年圓滿如意，月月事事順心，日日喜悅無憂，時時高興歡喜，刻刻朝氣蓬勃，祝福你！'
],
idiom: '元旦快樂',
src: ['./images/yd1.jpeg', './images/yd2.jpeg']
}, {
sentence: '2022年美好祝愿:萬事如意',
text: ['1.新年的鐘聲緩緩敲響，送走了舊年的回味悠長，迎來了新年的熱情綻放，借著一聲又一聲吉祥的鐘聲，為你送上最美的新年祝福。祝你在新的一年里身體健康，闔家幸福，萬事如意！',
'2.過年總要盤點(diǎn)一下，不僅數(shù)錢，也要盤點(diǎn)人情、心態(tài)和健康。對那些過往的人和事，該翻篇就翻篇。健康最重要的元素是：不糾纏不愉快的往事，跟對的人交往，心存善意，順其自然，無愧于心地向前走。',
'3.過年的節(jié)奏，春節(jié)的前奏。慌亂的腳步，擁擠的歸途。積攢的思念，綻放的笑臉，恍恍惚惚又一年，過年回家，回家過年，團(tuán)團(tuán)圓圓迎新年。'
],
idiom: '萬事如意',
src: ['./images/ry1.jpeg', './images/ry2.jpeg']
},
{
sentence: '2022年美好祝愿:心想事成',
text: ['1、如果這世上真的能夠心想事成，那就讓我賭上意志與獻(xiàn)上生命祈禱吧,只為此次的心想事成。',
'2、人生向往，唯愿：平平淡淡+安安樂樂；事業(yè)追求，祈愿：平平坦坦+順順安安；平安夜祝福你，愿你一生平平淡淡卻和安安樂樂相伴，追求從此平平坦坦卻與順順安安纏綿！',
'3、愿你有一份輕松的心情愿你所做的一切順利，愿你的堅持發(fā)芽、夢想開花相信自己,去吧你的笑可以美了這世界!',
'4、盡力做好自己份內(nèi)的事，剩下的就交給老天，其實(shí)人生如是而已。'
],
idiom: '心想事成',
src: ['./images/xx1.jpeg', './images/xx2.jpeg']
}, {
sentence: '2022年美好祝愿:招財進(jìn)寶',
text: ['1、盼望著，盼望著，開業(yè)的鞭炮響了，親朋的笑聲更亮了，心豁亮了，夢靠近了，無論走到何時何地，我都支持你，加油！祝愿開業(yè)大吉，生意興隆。',
'2、財神祝福你：冬去春來百花香，一條信息送四方，東方送你搖錢樹，南方送你永安康，西方送你好生意，北方送你錢滿箱。',
'3、開店大喜，六六六，順風(fēng)順?biāo)白?；開業(yè)大吉，八八八，恒發(fā)隆發(fā)發(fā)發(fā)發(fā)；開張大樂，九九九，好運(yùn)財運(yùn)到永久。祝福你生意興隆，財源茂盛，人氣旺旺，財富旺旺。',
'4、秋風(fēng)送爽心舒暢，財源滾滾到身旁。事業(yè)順利佳績創(chuàng)，工資獎金腰包藏；生意興隆達(dá)三江，迎來送往多繁忙；萬事順心好運(yùn)傍，財運(yùn)亨通不停享。818發(fā)一發(fā)，祝你發(fā)發(fā)發(fā)！'
],
idiom: '招財進(jìn)寶',
src: ['./images/zc1.jpeg', './images/zc2.jpeg']
},
{
sentence: '2022年美好祝愿:合家歡聚',
idiom: '合家歡聚',
text: ['1、合家歡，甜蜜蜜；全家福，甜蜜蜜；愛情美，甜蜜蜜；事業(yè)紅，甜蜜蜜。祝你：愛情甜蜜，心情甜蜜，生活甜蜜，家庭甜蜜！',
'2、幸福，原來是有聲音的。人們總要在清醒的時候，才聽的。只有理智清醒時，還能放心去愛的感情，才是值得永久珍藏的幸福。',
'3、祝全家身體健康，因為身體是本錢；團(tuán)結(jié)和睦，因為家和萬事興；生活幸福，因為這是人生追求的目的。',
'4、收藏?zé)o助，典當(dāng)愁苦，整理心情，展開坦途，這個地方是家，給我們無數(shù)，卻不求回報。祝福你的家庭妻賢子孝，溫馨幸福。',
'5、小小家庭，幸福無比，甜蜜四溢，裝滿溫馨，交好運(yùn)氣，事事如意，無憂無慮，快樂第一，祝：合家幸福，萬事如意。'
],
src: ['./images/hj1.jpeg', './images/hj2.jpeg']
}, {
sentence: '2022年美好祝愿:一帆風(fēng)順',
text: ['1、道離別，離別就在眼前；說再見，再見不會是永遠(yuǎn)。芳草萋萋下，我將你送別，祝愿你今后的道路越走越寬，越走越順，一路珍重！',
'2、人生路，有點(diǎn)苦，走過風(fēng)，走過雨，路過歡笑，經(jīng)過痛苦，有些感情，停留心中，有些朋友，時常掛念，朋友，一路保重！',
'3、如果生活的不開心，就去走另一條更想去的路吧，相遇難得，愿你一路順風(fēng)，累的時候也要回過頭一起笑。',
'4、祝你一路順風(fēng)，半路失蹤；祝你笑口常開，笑死活該；祝你天天開心，兩腿抽筋；祝你萬事如意，處處碰壁。',
'5、歡迎乘坐旅途祝?？燔嚕瘘c(diǎn)是祝福，旅程是健康站，幸福站，快樂站，好運(yùn)站，終點(diǎn)是平安站。愿你一路順風(fēng)，旅途愉快！'
],
idiom: '一帆風(fēng)順',
src: ['./images/yf1.jpeg', './images/yf2.jpeg']
}
]
},
})
