頁面中含有H5 自定義音頻播放器另作說明H5自定義帶列表音頻播放器
1、頁面
首頁：
列表頁：
詳情頁：
2、各網頁需要的通用點
cookie操作
//設置cookie
setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
},
//獲取cookie
getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1);
if (c.indexOf(name) != -1) {
return c.substring(name.length, c.length);
}
}
return "";
},
//清除cookie
clearCookie(cname) {
this.setCookie(cname, "", -1);
}
獲取url中參數
//獲取url參數
get_query_string: function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg); //search,查詢？後面的參數，並匹配正則
if (r != null) return decodeURI(r[2]);
return null;
},
列表觸底加載
//觸底加載
$(window).scroll(function() {
var d_height = $(document).height();
var w_height = $(window).height();
var w_scrollTop = $(window).scrollTop();
if (d_height - w_height - w_scrollTop <= 5) {
that.get_data();
}
});
頁面音頻列表 點擊切換 與 自定義播放器 相互對應另作說明。
3、部分代碼（不含音頻）
首頁：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="***jquery_172.js" language="javascript"></script>
<link href="***/css3/animate.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<title>兒童繪本</title>
<style type="text/css">
</style>
</head>
<body>
<div id="main">
<div class="title">分類專區</div>
<ul class="fl1">
<li @click="age_detail(1,'0-1歲')"><img src="images/fl_1.png" />0-1歲</li>
<li @click="age_detail(2,'1-2歲')"><img src="images/fl_2.png" />1-2歲</li>
<li @click="age_detail(3,'2-3歲')"><img src="images/fl_3.png" />2-3歲</li>
<li @click="age_detail(4,'3-4歲')"><img src="images/fl_4.png" />3-4歲</li>
<li @click="age_detail(5,'4-6歲')"><img src="images/fl_5.png" />4-6歲</li>
</ul>
<div class="title">品牌繪本專區</div>
<ul class="fl1 flhb">
<li v-for="(item,key) in library" @click="library_detail(item.id,item.name)" v-if="key<=5">
<img :src="item.pic" />
{{ item.alias }}
</li>
</ul>
<div class="title">推薦專區</div>
<ul class="fl2">
<li v-for="(book,index) in list" @click="detail(book.id)">
<div class="book center">
<div class="bookImg"><img :src="book.pic" /><span :class="book.is_read?'':'hide'">試讀</span></div>
<div class="bookIntor">
<b>{{ book.name }}</b>
<dl class="center">
<dt v-for="(tag,i) in book.tag">{{ tag }}</dt>
</dl>
</div>
</div>
<div class="introduce">
<div class="itd1"></div>
<p>{{ book.recommend }}</p>
</div>
</li>
</ul>
<div class="loadMore" v-loading="isLoading">
{{isEnd?'沒有了':'加載更多'}}
</div>
<!-- <div style="position: fixed;right: 30px;top: 100px;background: #1f1f1f;color: #e9e9eb;">-->
<!-- {{txt}}-->
<!-- </div>-->
</div>
</body>
<script type="text/javascript">
var api = "****/book_front.php";
var main = new Vue({
el: '#main',
data: {
user_id: Number,
list: [],
library: [],
isEnd: false,
isLoading: false,
curPage: 1,
txt: '測試數據'
},
created() {
var that = this;
that.user_id = that.get_query_string('bbs_qq_id'); //用戶圈圈id
//that.user_id = that.get_query_string('user_id');
that.setCookie('mms***id', that.user_id, 1);
that.get_data();
that.get_library();
//觸底加載
$(window).scroll(function() {
var d_height = $(document).height();
var w_height = $(window).height();
var w_scrollTop = $(window).scrollTop();
if (d_height - w_height - w_scrollTop <= 5) {
that.get_data();
}
});
},
watch() {
var that = this;
that.user_id = that.get_query_string('user_id');
that.setCookie('mms****id', that.user_id, 1);
that.get_data();
that.get_library();
//觸底加載
$(window).scroll(function() {
var d_height = $(document).height();
var w_height = $(window).height();
var w_scrollTop = $(window).scrollTop();
if (d_height - w_height - w_scrollTop <= 5) {
that.get_data();
}
});
},
methods: {
//獲取合作者
get_library: function() {
var that = this;
$.get(
api + '?method=get_library',
function(data) {
console.log(data)
if (data.ret) {
that.library = data.data;
} else {
alert('品牌列表有誤喲');
}
},
'json'
)
},
//獲取推薦列表
get_data: function() {
var that = this;
if (that.isLoading || that.isEnd) {
return;
}
that.isLoading = true;
$.get(
api + '?method=get_recom_book_list&page=' + that.curPage + '&limit=10' + '&user_id=' + that.user_id,
function(data) {
if (data.ret) {
that.list = that.list.concat(data.data);
that.curPage++;
that.isLoading = false;
} else {
that.isEnd = true;
}
},
'json'
)
},
detail: function(id) {
window.location.href = "detail.php?id=" + id + '&action=goto_box&navStyle=opaque';
},
library_detail: function(id, title) {
window.location.href = "age.php?keyword=" + id + "&title=" + title + '&list_type=2&action=goto_box';
},
age_detail: function(age, title) {
window.location.href = "age.php?keyword=" + age + "&title=" + title + '&list_type=1&action=goto_box';
},
//獲取url參數
get_query_string: function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg); //search,查詢？後面的參數，並匹配正則
if (r != null) return decodeURI(r[2]);
return null;
},
//設置cookie
setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
},
//獲取cookie
getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1);
if (c.indexOf(name) != -1) {
return c.substring(name.length, c.length);
}
}
return "";
},
//清除cookie
clearCookie(cname) {
this.setCookie(cname, "", -1);
}
}
});
</script>
</html>
2、列表頁
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="***s/jquery_172.js" language="javascript"></script>
<link href="ht***/animate.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<title>1-2歲</title>
<style type="text/css">
</style>
</head>
<body>
<div id="main">
<div v-if="type">
<div class="reduce">
<div class="pic"><img :src="lib_info.pic" /></div>
<div class="word">
<div class="big">{{ lib_info.name }}</div>
<div class="small">
<p class="line2" id="rdSmall">
{{ lib_info.introduction }}
</p>
<div v-if="lib_info.over" id="openRd" @click="openLine()">[展開]</div>
</div>
</div>
</div>
<div class="listTit">TA的相關推薦</div>
</div>
<ul>
<li v-for="(book,index) in list" @click="detail(book.id)">
<div class="left"><img :src="book.pic" />
<span v-if="book.tag_type" :class="'typ'+ book.tag_type">{{ book.tag[0] }}</span>
</div>
<div class="right">
<div class="line2 r1">{{ book.name }}</div>
<div class="line2 r2">{{ book.recommend }}</div>
<div class="r3 center"><img :src="book.library_info.pic" />{{ book.library }}
</div>
</div>
</li>
</ul>
<div class="loadMore" v-loading="isLoading">
{{isEnd?'沒有了':'加載更多'}}
</div>
</div>
</body>
<script type="text/javascript">
var openstate = 1;
var api = "ht*****/book_front.php";
var main = new Vue({
el: '#main',
data: {
user_id: Number,
list: [],
keyword: String,
title: String,
type: Boolean,
list_type: String, //判斷是從年齡1 還是從品牌2 過來的
lib_info: [],
isEnd: false,
isLoading: false,
curPage: 1
},
created() {
var that = this;
that.user_id = that.getCookie('mm***rid');
that.keyword = that.get_query_string('keyword');
that.list_type = that.get_query_string('list_type');
that.title = that.get_query_string('title');
document.title = that.title; //動態修改title
that.get_data(); //獲取數據
if (that.list_type == 1) {
that.type = false;
} else {
that.type = true;
that.get_library_info(that.keyword);
}
//觸底加載
$(window).scroll(function() {
var d_height = $(document).height();
var w_height = $(window).height();
var w_scrollTop = $(window).scrollTop();
if (d_height - w_height - w_scrollTop <= 5) {
that.get_data();
}
});
},
watch() {
var that = this;
that.user_id = that.getCookie('mmsq_hb_userid');
that.keyword = that.get_query_string('keyword');
that.list_type = that.get_query_string('list_type');
that.title = that.get_query_string('title');
document.title = that.title; //動態修改title
that.get_data(); //獲取數據
if (that.list_type == 1) {
that.type = false;
} else {
that.type = true;
that.get_library_info(that.keyword);
}
//觸底加載
$(window).scroll(function() {
var d_height = $(document).height();
var w_height = $(window).height();
var w_scrollTop = $(window).scrollTop();
//that.txt = 'scrollTop:'+w_scrollTop+';w-height:'+w_height+';d-height'+d_height;
if (d_height - w_height - w_scrollTop <= 5) {
that.get_data();
}
});
},
methods: {
//獲取數據
get_data: function() {
var that = this;
if (that.isLoading || that.isEnd) {
return;
}
that.isLoading = true;
$.get(
api, {
method: 'get_class_book_list',
page: that.curPage,
limit: 10,
keyword: that.keyword,
list_type: that.list_type
},
function(data) {
if (data.ret) {
that.list = that.list.concat(data.data);
if (that.curPage == 1 && data.count < 10) {
that.isEnd = true;
}
that.curPage++;
that.isLoading = false;
} else {
that.isEnd = true;
}
},
'json'
);
},
//獲取合作方信息
get_library_info(id) {
var that = this;
$.get(
api + '?method=get_library_info&id=' + id,
function(data) {
console.log(data)
if (data.ret) {
that.lib_info = data.data;
} else {
alert('獲取合作方信息有誤喲');
}
},
'json'
);
},
detail: function(id) {
window.location.href = "detail.php?id=" + id + '&action=goto_box&navStyle=opaque';
},
//獲取url參數
get_query_string: function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg); //search,查詢？後面的參數，並匹配正則
if (r != null) return decodeURI(r[2]);
return null;
},
//摺疊收縮
openLine: function() {
if (openstate == 1) {
$("#rdSmall").removeClass("line2");
$("#openRd").text("[收起]");
openstate = 2;
} else {
$("#rdSmall").addClass("line2");
$("#openRd").text("[展開]");
openstate = 1;
}
}
}
});
</script>
</html>
3、詳情頁（音頻播放器另作說明）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<title>詳情頁</title>
<script src="htt****js/jquery_172.js" language="javascript"></script>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<!--動畫樣式-->
<link href="ht****/css3/animate.css" rel="stylesheet" type="text/css">
<!--音頻播放器-->
<link rel="stylesheet" type="text/css" href="./css/audio.css">
<script type="text/javascript" src="./js/audio.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="main">
<header>
<div class="center">
<div class="pictuer"><img :src="data.pic"/></div>
<div class="message">
<div class="tit">{{ data.name }}</div>
<div class="peoplr center" @click="library_detail(data.library_id,data.library)">
<img :src="data.library_pic"/>{{ data.library }}<span></span>
</div>
</div>
</div>
<div class="writer">
<p><span>作者</span>{{ data.author }}</p>
<p v-if="data.publisher"><span>出版社</span>{{ data.publisher }}</p>
<p v-if="data.translater"><span>翻譯</span>{{ data.translater }}</p>
</div>
</header>
<ul :class="mp3_count >= 1?'music':'hid'" id="storyLin">
<li v-for="(list,key) in data.mp3_list" @click="playSon(this,key)" :class="{'on':clicked==key}">
<div :class="[{'hid':clicked ==key}, num]">{{key+1}}</div>
<div :class="[{'hid':clicked !=key}, laba]"></div>
<div class="name">
<p>{{list.title}}</p>
<div class="dat">
<span></span>{{list.num}}人
<span style="margin-left: 20px;"></span>{{list.time}}
</div>
</div>
</li>
</ul>
<div class="card">
<b>繪本介紹</b>
<p v-html="data.introduction">
{{ data.introduction }}
</p>
</div>
<div class="card bott">
<b>相關推薦</b>
<div class="center three">
<div v-for="(list,key) in relate_list" v-if="key<=2" @click="detail(list.id)">
<p><img :src="list.pic" class="relate_pic"/></p>
<span>{{ list.name }}</span>
</div>
</div>
<div class="center three">
<div v-for="(list,key) in relate_list" v-if="key>2" @click="detail(list.id)">
<p><img :src="list.pic" class="relate_pic"/></p>
<span>{{ list.name }}</span>
</div>
</div>
</div>
<div class="tab" v-if="os">
<!-- <div id="co1" onClick="collec()"><span></span>收藏</div>-->
<!-- <div id="co2" onClick="collec()" class="hid"><span class="animated tada red"></span>已收藏</div>-->
<div @click="shareAllPlat()"><span></span>分享</div>
<div class="bton" @click="open_app()">購買繪本</div>
</div>
<!-- <div v-if="os" class="rightButt" @click="read(o_user_id)"><span></span>我要試讀</div>-->
<!--繪本基礎信息-->
<div :class="[{'hid':mp3_count < 1}, audio_box]">
<div class="audio-container">
<div class="audio-cover" @click="goRight()"></div>
<div class="audio-view">
<h3 class="audio-title">未知歌曲</h3>
<div class="audio-body">
<div class="audio-backs">
<div class="audio-this-time">00:00</div>
<div class="audio-count-time">00:00</div>
<div class="audio-setbacks">
<i class="audio-this-setbacks">
<span class="audio-backs-btn"></span>
</i>
<span class="audio-cache-setbacks">
</span>
</div>
</div>
</div>
<div class="audio-btn">
<div class="audio-select">
<div class="audio-prev"></div>
<div class="audio-play"></div>
<div class="audio-next"></div>
<!-- <div class="audio-menu"></div>-->
<!-- <div class="audio-volume"></div>-->
</div>
<div class="audio-set-volume">
<div class="volume-box">
<i><span></span></i>
</div>
</div>
<div class="audio-list">
<div class="audio-list-head">
<p>☺隨心聽</p>
<span class="menu-close">關閉</span>
</div>
<ul class="audio-inline">
</ul>
</div>
</div>
</div>
</div>
</div>
<!--音頻播放器-->
</div>
</body>
<script type="text/javascript">
var api = "http*****b/book_front.php";
var song = [];
var audioFn = [];
var main = new Vue({
el: '#main',
data: {
id: Number,
user_id: Number,
o_user_id: Number,
data: Object,//數據
relate_list: Object,//相關推薦
os: Number,
mp3_count: Number,
audio_type: 2,//播放器是否展示隱藏,
clicked: -1,
num: 'num',
laba: 'laba',
audio_box:'audio-box audio-boxhid'
},
created() {
var that = this;
var agent = navigator.userAgent;
that.id = that.get_query_string('id');
that.user_id = that.getCookie('mms***id');
if (that.user_id) {
that.get_user_oid(that.user_id);//轉o_user_id
}
that.get_data();
that.get_relate_list();
//判斷終端
if (agent.indexOf("Windows") >= 0 || agent.indexOf("MicroMessenger") >= 0) {
that.os = 0;
} else if (agent.indexOf("iphone") >= 0 || agent.indexOf("iphone") >= 0) {
that.os = 1;
} else {
that.os = 2;
}
},
methods: {
//獲取專輯信息
get_data() {
var that = this;
$.get(
api + '?method=get_book_info&user_id=' + that.user_id + '&id=' + that.id,
function (data) {
if (data.ret) {
that.data = data.data;
//音頻列表賦值,並實例化音頻組件
song = that.data.mp3_list;
that.mp3_count = song.length
if (that.mp3_count >= 1) {
that.new_audio(song);
}
} else {
alert('數據獲取失敗！')
}
},
'json'
)
},
//實例化音頻播放
new_audio(song) {
var that = this;
audioFn = audioPlay({
song: song,
autoPlay: false //是否立即播放第一首，autoPlay爲true且song爲空，會alert文本提示並退出
});
//獲取音頻播放key
if (!songEq) {
songEq = -1
}
setInterval(function () {
that.clicked = songEq;
}, 300)
},
//獲取相關
get_relate_list() {
var that = this;
$.get(
api + '?method=get_relate_list&id=' + that.id,
function (data) {
that.relate_list = data;
},
'json'
)
},
//獲取相關
get_user_oid(user_id) {
var that = this;
$.get(
api + '?method=get_user_oid&user_id=' + user_id,
function (data) {
if (data.ret) {
that.o_user_id = data.data.o_user_id;
} else {
alert('數據獲取失敗！')
}
},
'json'
)
},
//試讀
read(o_id) {
window.location.href = "ht****k.php?gid=" + o_id + "&action=goto_box";
},
detail(id) {
window.location.href = "detail.php?id=" + id;
},
library_detail(id,title) {
window.location.href = "age.php?keyword=" + id + "&title=" + title + "&list_type=2&action=goto_box";
},
//跳轉購買頁
go_to_buy(url) {
window.location.href = url;
},
/*
*呼起app（app內部使用）
*判斷繪本是淘寶1，天貓2，京東3，還是其他0(跳轉頁面)
*/
open_app() {
var that = this.data;
if (that.sale_type == 1 || that.sale_type == 2) {
//淘寶、天貓
window.location.href = that.sale_url;
} else if (that.sale_type == 3) {
//京東
var params = '{"category":"jump","des":"getCoupon","action":"to","url":"' + that.sale_url + '"}';
var params_str = encodeURI(params);
var appUrl = 'openapp.jdmobile://virtual?params=' + params_str;
window.location.href = appUrl;
} else {
//直接跳轉
window.location.href = that.sale_url;
}
},
//獲取url參數
get_query_string(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);//search,查詢？後面的參數，並匹配正則
if (r != null) return decodeURI(r[2]);
return null;
},
//設置cookie
setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
},
//獲取cookie
getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1);
if (c.indexOf(name) != -1) {
return c.substring(name.length, c.length);
}
}
return "";
},
//清除cookie
clearCookie(cname) {
this.setCookie(cname, "", -1);
},
//分享（app內部封裝好的）
shareAllPlat() {
var that = this;
var title = "我****看~ ";
var msg = that.data.recommend;
var click_url = 'ba****share.php?id=' + that.id;
var image_url = that.data.pic;
var id = '';
if (that.os == 2) {
click_url = 'http://' + click_url;
//image_url = 'http://' + image_url;
window.posts.getShareContent(title, msg, click_url, image_url, id);
} else {
image_url = image_url.replace('http://', '');
window.location = 'ios:showAllShare:' + title + '||' + msg + '||' + click_url + '||' + image_url + '||' + id;
}
},
/*
音頻播放器相關操作
*/
playSon(th, key) {
var that = this;
clearTimeout(that.clock);//清除定時器
$(".audio-box").removeClass("hid");
$(".audio-box").removeClass("audio-boxhid");
audioFn.selectMenu(key, true);
that.clicked = key;
that.clock = setTimeout(function () {
$(".audio-box").addClass("audio-boxhid");
that.audio_type = 2;
}, 5000);
},
//控制播放器是否展開
goRight() {
var that = this;
clearTimeout(that.clock);//清除定時器
if (that.audio_type == 1) {
$(".audio-box").addClass("audio-boxhid");
that.audio_type = 2;
} else {
$(".audio-box").removeClass("audio-boxhid");
that.audio_type = 1;
}
that.clock = setTimeout(function () {
$(".audio-box").addClass("audio-boxhid");
that.audio_type = 2;
}, 5000);
}
}
})
/*
$(function () {
// 向歌單中添加新曲目，第二個參數true爲新增後立即播放該曲目，false則不播放
audioFn.newSong({
'cover': 'images/audio/cover4.jpg',
'src': 'http://filebaby.qubaobei.com/story/low/105.mp3',
'title': '極樂淨土 - GARNiDELiA'
}, false);
// 暫停播放
audioFn.stopAudio();
// 開啓播放
audioFn.playAudio();
// 選擇歌單中索引爲3的曲目(索引是從0開始的)，第二個參數true立即播放該曲目，false則不播放
audioFn.selectMenu(3,true);
// 查看歌單中的曲目
console.log(audioFn.song);
// 當前播放曲目的對象
console.log(audioFn.audio);
});
*/
</script>
</html>
樣式表
首頁css
body {
margin: 0;
padding: 17px;
font-family: Arial;
font-size: 15px;
background: #fff;
color: #2c2d2e;
}
ul,
li,
dl,
dd,
dt,
p {
margin: 0;
padding: 0;
list-style: none;
}
.hide {
display: none !important;
}
.center {
display: flex;
align-items: center;
}
@font-face {
font-family: 'mamabbs';
/* project id 613978 */
src: url('//at.alicdn.com/t/font_613978_4lewg4gzq2p.eot');
src: url('//at.alicdn.com/t/font_613978_4lewg4gzq2p.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_613978_4lewg4gzq2p.woff2') format('woff2'),
url('//at.alicdn.com/t/font_613978_4lewg4gzq2p.woff') format('woff'),
url('//at.alicdn.com/t/font_613978_4lewg4gzq2p.ttf') format('truetype'),
url('//at.alicdn.com/t/font_613978_4lewg4gzq2p.svg#mamabbs') format('svg');
}
.title {
padding-bottom: 18px;
font-size: 17px;
font-weight: bold;
}
.fl1 {
margin-bottom: 45px;
display: flex;
justify-content: space-between;
}
.fl1 img {
width: 50px;
height: 50px;
margin-bottom: 5px;
border-radius: 50%;
overflow: hidden;
}
.fl1 li {
width: 20%;
overflow: hidden;
display: flex;
align-items: center;
flex-direction: column;
font-size: 13px;
}
.flhb {
justify-content: flex-start;
}
.flhb img {
border: 0.5px solid #dbdbdb;
}
.fl2 li {
padding: 20px 0 20px 10px;
border-bottom: 0.5px solid #f2f2f2;
}
.fl2 li:first-child {
padding-top: 0;
}
.fl2 li:last-child {
border-bottom: none;
}
.fl2 .bookImg {
width: 95px;
height: 95px;
margin-right: 15px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 7px rgba(181, 181, 181, 0.4);
overflow: hidden;
position: relative;
}
.fl2 .bookImg span {
padding: 6px;
background: #000;
color: #f1e1b6;
border-radius: 0 0 10px 0;
position: absolute;
top: 0;
left: 0;
font-size: 12px;
}
.fl2 .bookImg img {
width: 95px;
height: 95px;
}
.fl2 .bookIntor {
width: 66%;
}
.fl2 .bookIntor b {
font-size: 17px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.fl2 .bookIntor dl {
margin-top: 10px;
}
.fl2 .bookIntor dt {
padding: 2px 5px;
margin-right: 5px;
border: 0.5px solid #ff9dbb;
border-radius: 4px;
font-size: 12px;
color: #ff9dbb;
line-height: 19px;
}
.fl2 .introduce {
margin-top: 15px;
color: #8a8a8a;
font-size: 13px;
display: flex;
align-items: flex-start;
}
.fl2 .introduce .itd1 {
margin-right: 10px;
font-family: mamabbs;
color: #e5e5e5;
font-size: 10px;
}
.fl2 .introduce p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.loadMore {
text-align: center;
font-size: 10px;
}
列表頁css
body {
margin: 0;
font-family: Arial;
font-size: 13px;
background: #fff;
color: #2c2d2e;
}
ul,
li,
dl,
dd,
dt,
p {
margin: 0;
padding: 0;
list-style: none;
}
.hide {
display: none !important;
}
.center {
display: flex;
align-items: center;
}
/*#main {padding: 17px;}*/
.listTit {
padding: 17px 17px 0;
font-size: 15px;
font-weight: bold;
color: #8a8a8a;
}
.line2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
li {
padding: 18px 17px;
display: flex;
align-items: flex-start;
border-bottom: 0.5px solid #f2f2f2;
}
/*
li:first-child {
padding-top: 0;
}
*/
li:last-child {
border-bottom: none;
}
.left {
width: 100px;
height: 100px;
margin-right: 15px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 7px rgba(181, 181, 181, 0.4);
position: relative;
}
.left span {
padding: 4px 10px;
border-radius: 0 0 10px 0;
font-size: 12px;
position: absolute;
left: 0;
top: 0;
}
.left .typ1 {
background: #7853f2;
color: #fff;
}
.left .typ2 {
background: #000000;
color: #f1e1b6;
}
.left .typ3 {
background: #ffa95c;
color: #fff;
}
.left .typ4 {
background: #8bacff;
color: #fff;
}
.left .typ5 {
background: #7dca24;
color: #fff;
}
.left .typ6 {
background: #c2e7b0;
color: #fff;
}
.left img {
width: 100px;
height: 100px;
}
.right {
width: 68%;
}
.right .r1 {
font-size: 15px;
font-weight: bold;
-webkit-line-clamp: 1;
}
.right .r2 {
margin-top: 7px;
color: #8a8a8a;
}
.right .r3 {
margin-top: 15px;
color: #8a8a8a;
}
.right .r3 img {
width: 23px;
height: 23px;
margin-right: 10px;
border-radius: 50%;
}
.reduce {
width: 92%;
padding: 25px 4%;
background: #fff;
border-radius: 0 0 30px 30px;
box-shadow: 0 0 20px rgba(185, 185, 185, 0.42);
display: flex;
align-items: flex-start;
}
.reduce .pic img {
width: 65px;
height: 65px;
margin-right: 16px;
border-radius: 50%;
}
.reduce .word {
width: 100%;
}
.reduce .word .big {
margin-bottom: 8px;
font-size: 18px;
font-weight: bold;
}
.reduce .word .small {
width: 92%;
color: #8a8a8a;
position: relative;
}
.reduce .word .small div {
width: 42px;
height: 17px;
background: #fff;
position: absolute;
right: 0;
bottom: 0;
text-align: right;
color: #ff749b;
}
.loadMore {
text-align: center;
font-size: 10px;
}
詳情頁css（音頻的css另作說明）
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 15px;
background: #fff;
color: #2c2d2e;
}
ul, li, dl, dd, dt, p {
margin: 0;
padding: 0;
list-style: none;
}
.hid {
display: none;
}
.center {
display: flex;
align-items: center;
}
@font-face {
font-family: 'mamabbs'; /* project id 613978 */
src: url('//at.alicdn.com/t/font_613978_w6yhrxdtw4.eot');
src: url('//at.alicdn.com/t/font_613978_w6yhrxdtw4.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_613978_w6yhrxdtw4.woff2') format('woff2'),
url('//at.alicdn.com/t/font_613978_w6yhrxdtw4.woff') format('woff'),
url('//at.alicdn.com/t/font_613978_w6yhrxdtw4.ttf') format('truetype'),
url('//at.alicdn.com/t/font_613978_w6yhrxdtw4.svg#mamabbs') format('svg');
}
header {
width: 100%;
height: 220px;
padding-top: 80px;
background: url("xxxxxxxxxxxxxxxxx") no-repeat;
background-size: 100% 320px;
}
.pictuer {
margin: 0 10px 0 20px;
}
.pictuer img {
width: 120px;
height: 120px;
border-radius: 10px;
}
.message {
padding: 0 10px;
color: #fff;
}
.message .tit {
font-size: 18px;
font-weight: bold;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.message .peoplr {
margin-top: 10px;
}
.message .peoplr img {
width: 22px;
height: 22px;
margin-right: 10px;
border-radius: 50%;
}
.message .peoplr span {
margin-left: 10px;
font-family: mamabbs;
font-size: 10px;
}
.message .how {
margin-top: 15px;
color: #ff87a9;
}
.message .how span {
font-size: 20px;
font-weight: bold;
}
.message .star {
font-size: 13px;
color: #c3c3c3;
}
.message .star img {
width: 62px;
height: 9px;
margin-right: 10px;
}
.writer {
padding: 10px 19px;
font-size: 13px;
color: #c1c1c1;
}
.writer p {
margin: 5px 0;
}
.writer span {
margin-right: 10px;
padding-right: 10px;
border-right: 0.5px solid #c1c1c1;
}
.music {
padding: 16px 20px;
}
.music li {
padding: 10px 0;
display: flex;
align-items: center;
border-bottom: 0.5px solid #eee;
}
.music li:last-child {
border-bottom: none;
}
.music .on {
color: #ff9dbb;
}
.music .on .laba {
margin-right: 8px;
font-family: mamabbs;
font-size: 20px;
}
.music .num {
margin-right: 20px;
}
.music .dat {
margin-top: 5px;
font-size: 12px;
color: #999999;
}
.music .dat span {
margin: 0 6px 0 0;
font-family: mamabbs;
}
.card {
padding: 15px;
border-top: 10px solid #f2f2f2;
}
.card b {
margin-bottom: 18px;
display: inline-block;
font-size: 18px;
}
.card .three {
margin-bottom: 16px;
justify-content: space-between;
}
.card .three div {
width: 30%;
text-align: center;
}
.card .three p {
width: 100%;
height: 100px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 7px rgba(181, 181, 181, 0.4);
}
.card .three img {
width: 100%;
}
.card .three span {
margin-top: 5px;
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bott {
padding-bottom: 130px;
}
.tab {
width: 100%;
height: 7.5vh;
padding-top: 10px;
background: #fff;
box-shadow: 0 0 7px rgba(181, 181, 181, 0.4);
position: fixed;
left: 0;
bottom: 0;
display: flex;
align-items: flex-start;
}
.tab div {
width: 26%;
height: 40px;
text-align: center;
font-size: 13px;
}
.tab span {
margin-bottom: 2px;
font-family: mamabbs;
color: #afafaf;
font-size: 20px;
display: block;
}
.tab .bton {
width: 70%;
height: 40px;
border-radius: 20px;
color: #fff;
line-height: 40px;
font-size: 16px;
background: -webkit-linear-gradient(left, #ff8e29, #ff7800);
background: linear-gradient(left, #ff8e29, #ff7800);
}
.tab .red {
color: #e90933;
}
.shareBg {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
}
.whiteBg {
width: 100%;
height: 220px;
padding-top: 20px;
background: #fff;
position: fixed;
left: 0;
bottom: 0;
text-align: center;
transition: 0.3s;
}
.godown {
bottom: -242px;
}
.whiteBg li {
width: 25%;
display: flex;
align-items: center;
flex-direction: column;
font-size: 13px;
}
.whiteBg img {
width: 40px;
height: 40px;
margin: 20px 0 5px 0;
}
.whiteBg .shareClose {
height: 60px;
line-height: 60px;
margin-top: 36px;
border-top: 0.5px solid #f2f2f2;
}
.rightButt {
width: 120px;
height: 54px;
border-radius: 27px 0 0 27px;
line-height: 54px;
text-align: center;
background: #ff9dbb;
color: #fff;
position: fixed;
top: 44%;
right: 0;
}
.rightButt span {
margin-right: 7px;
font-family: mamabbs;
font-size: 18px;
}
.relate_pic {
height: auto;
width: 30%;
}