Skip to content

T
token
Commit e69a65ed authored by shajiaiming's avatar shajiaiming
Browse files
Options

test

parent 29212966
Hide whitespace changes
Inline Side-by-side
Showing with 928 additions and 0 deletions
api/controllers/test 0 → 100644
View file @ e69a65ed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<base href="/" />
</head>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
font-size: 0.12rem;
/**
* Mac 和 iOS 使用 PingFang SC 字体；
* MIUI 8.0+ 的小米手机使用小米兰亭；
* 普通 Android 手机使用 Droidsansfallback；
* 如果前面的字体都不支持，则跟随系统使用默认字体 system-ui；
* 为了兼容及向后兼容 macOS 和 iOS 设备，用 -apple-system 及 BlinkMacSystemFont 来兼容适配 system-ui 标准；
* 如果 Mac 或 iOS 版本过低则使用 Helvetica Neue 字体
*/
font-family: "PingFang SC", miui, Droidsansfallback, system-ui, -apple-system,
BlinkMacSystemFont, Helvetica Neue;
}
html:before {
content: "";
display: block;
width: 100%;
height: 1000%;
position: fixed;
background: #fff;
top: -500%;
z-index: -1000;
}
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
ul {
list-style: none;
}
a {
text-decoration: none !important;
}
#root,
#app {
width: 100%;
height: 100%;
}
button {
outline: none;
border: none;
}
input {
outline: none;
-webkit-appearance: none;
}
#svg {
display: none;
}
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
</style>
<script>
var documentElement = document.documentElement;
function callback() {
var clientWidth = documentElement.clientWidth;
// 屏幕宽度大于1366，不在放大
clientWidth = clientWidth < 1366 ? clientWidth : 1366;
if (location.href.indexOf("atlandscape=true") > 0) {
//页面带横屏参数时 横屏显示
documentElement.style.fontSize = clientWidth / 6.67 + "px"; //1rem = 100px
// 在横屏的 宽高比大于16/9时，就以高度来计算，适配全面屏和iphonex系列
if (clientWidth / documentElement.clientHeight > 16 / 9) {
documentElement.style.fontSize =
documentElement.clientHeight / 3.75 + "px"; //1rem = 100px
}
} else {
documentElement.style.fontSize = clientWidth / 3.75 + "px"; //1rem = 100px
}
}
document.addEventListener("DOMContentLoaded", callback);
window.addEventListener(
"orientationchange" in window ? "orientationchange" : "resize",
function() {
setTimeout(callback, 200);
}
);
</script>
<script src="https://athena-static.s3.cn-north-1.amazonaws.com.cn/js/react.production.min.js"></script>
<script src="https://athena-static.s3.cn-north-1.amazonaws.com.cn/js/react-dom.production.min.js"></script>
<script src="https://athena-static.s3.cn-north-1.amazonaws.com.cn/js/babel.min.js"></script>
<body>
<div id="root"></div>
<script type="text/babel">
class Guide extends React.Component {
constructor(props) {
super(props);
this.state = {//初始化数据
bookListItems: [
{
bookImg: 'https://ydschool-online.nosdn.127.net/236f374d-fdf8-443c-94da-777749413a9e.png',//书籍图片地址
title: '《伊莱家的谎言机》',//书标题
reasonDes: '主题推荐：勇敢面对错误，用诚实代替谎言',//主体推荐
bookId: '15098200',//书本id
canRead: false,//是否显示APP内可读按钮 true 显示 false 不显示
recommendReason: '推荐理由：伊莱起初似乎并不习惯于说实话，可之后的说谎以及推卸责任给他带来了一系列的烦心事儿。这让伊莱认识到，实话实说其实挺好的。本书会告诉孩子：实话实说要比撒谎容易得多；本书也会告诉家长和老师：只要正确引导孩子，孩子就有能力自己解决这个问题。',//推荐理由
},
{
bookImg: 'https://ydschool-online.nosdn.127.net/236f374d-fdf8-443c-94da-777749413a9e.png',//书籍图片地址
title: '《伊莱家的谎言机》',//书标题
reasonDes: '主题推荐：勇敢面对错误，用诚实代替谎言',//主体推荐
bookId: '15098200',//书本id
canRead: true,//是否显示APP内可读按钮 true 显示 false 不显示
recommendReason: '推荐理由：伊莱起初似乎并不习惯于说实话，可之后的说谎以及推卸责任给他带来了一系列的烦心事儿。这让伊莱认识到，实话实说其实挺好的。本书会告诉孩子：实话实说要比撒谎容易得多；本书也会告诉家长和老师：只要正确引导孩子，孩子就有能力自己解决这个问题。',//推荐理由
},
],
tabs: [
{
name: "书籍介绍",
id: 1
},
{
name: "教学目标",
id: 2
},
{
name: "策略解读",
id: 3
},
{
name: "话题讨论",
id: 1
},
{
name: "亲子互动",
id: 2
},
{
name: "推荐书目",
id: 3
}
],
current: 0,
};
this.addListener = this.addListener.bind(this);
this.removeListener = this.removeListener.bind(this);
this.move = this.move.bind(this);
}
checkDevice() {//判断设备系统
return /ipad|iphone/i.test(window.navigator.userAgent)
? "ios"
: /android/i.test(window.navigator.userAgent) ? "android" : false;
}
checkFromApp() {//是否在APP内
return (
/AthenaPhone/i.test(window.navigator.userAgent) ||
/AthenaAndroid/i.test(navigator.userAgent)
);
}
handleOpenApp(needCheckOrigin = false, redirectUrl) {//处理打开app函数
debugger
const iosAppUrl = redirectUrl ? redirectUrl : "ydathena://";
const androidAppUrl = redirectUrl ? redirectUrl : "ydathena://";
let iosDownloadUrl = "https://itunes.apple.com/cn/app/id1390443078?mt=8";
let androidDownloadUrl =
"https://static.du.youdao.com/download/latest_youdaoledu_official.apk";
function checkOpen(cb) {
let _clickTime = +new Date();
return new Promise((resolve, reject) => {
let _count = 0;
let intHandle;
intHandle = setInterval(function() {
_count++;
let elsTime = +new Date() - _clickTime;
if (_count >= 50 || elsTime > 1000) {
clearInterval(intHandle);
if (document.visibilityState === "hidden") {
resolve(true);
} else {
resolve(false);
}
}
}, 20);
});
}
//try open app
if (!this.checkFromApp()) {
//不在app内
checkOpen()
.then(opened => {
if (!opened) {
const device = this.checkDevice();
setTimeout(() => {
window.location.href =
device === "ios"
? iosDownloadUrl
: device === "android" ? androidDownloadUrl : location.href;
}, 0);
}
})
.catch(err => {
console.error(err);
});
}
window.location.href =
(this.checkDevice() === "ios"
? iosAppUrl
: this.checkDevice() === "android" ? androidAppUrl : "") +
(needCheckOrigin && this.checkFromApp() ? "member" : "");
}
handleRead(bookId) {//APP内阅读
let url = `ydathena://book?libraryId=${bookId}`;
this.handleOpenApp(false, url);
}
singleBook(bookItem) {//书本组件
return (
<div class="recomond" key={bookItem.bookId}>
<div class="top">
<div class="top_img">
<img src={bookItem.bookImg} alt=""/>
</div>
<div class="top_des">
<div class="top_title">{bookItem.title}</div>
<div class="reasonDes">{bookItem.reasonDes}</div>
{bookItem.canRead&&(
<div class="button" onClick={()=>this.handleRead(bookItem.bookId)}>
<img src="https://ydschool-online.nosdn.127.net/78ba2d00-c960-4740-8427-6e2f1cf3b2cf.png" alt=""/>
<div class="text">APP内可读</div>
</div>
)}
</div>
</div>
<div class="recommendReason">{bookItem.recommendReason}</div>
</div>
)
}
componentDidMount() {
document.title = "家长指导手册";
this.addListener();
}
move() {
let cont0 = this.refs.cont0;
let cont1 = this.refs.cont1;
let cont2 = this.refs.cont2;
let cont3 = this.refs.cont3;
let cont4 = this.refs.cont4;
let cont5 = this.refs.cont5;
const tabH = 0.44 * documentElement.style.fontSize.split('px')[0];
//console.log(this.refs.guides.getBoundingClientRect().top);
//console.log(cont1.getBoundingClientRect().top);
if(this.refs.guides.getBoundingClientRect().top < -20){
this.refs.topTab.style.display = "block";
}else{
this.refs.topTab.style.display = "none";
}
if (cont5.getBoundingClientRect().top <= tabH) {
this.setState({
current: 5
});
return false;
}
if (cont4.getBoundingClientRect().top <= tabH) {
this.refs.tab.scrollLeft = 100;
this.setState({
current: 4
});
return false;
}
if (cont3.getBoundingClientRect().top <= tabH) {
this.setState({
current: 3
});
return false;
}
if (cont2.getBoundingClientRect().top <= tabH) {
this.setState({
current: 2
});
return false;
}
if (cont1.getBoundingClientRect().top <= tabH) {
this.refs.tab.scrollLeft = 0;
this.setState({
current: 1
});
return false;
}
if (cont0.getBoundingClientRect().top <= tabH) {
this.setState({
current: 0
});
}
}
addListener() {
document.addEventListener("scroll", this.move);
}
removeListener() {
document.removeEventListener("scroll", this.move);
}
itemNav(index) {//菜单切换
this.removeListener();
let that = this;
this.setState({
current: index
},()=>{
if(index === 0){
this.refs.cont0.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
if(index === 1){
this.refs.tab.scrollLeft = 0;
this.refs.cont1.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
if(index === 2){
this.refs.cont2.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
if(index === 3){
this.refs.cont3.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
if(index === 4){
this.refs.tab.scrollLeft = 100;
this.refs.cont4.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
if(index === 5){
this.refs.cont5.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
//滚动完成后 重新监听
let temp = 1;
setTimeout(function judge(){
let temp1 = document.getElementsByTagName("html")[0].scrollTop;
console.log('temp '+temp);
console.log('temp1 '+temp1);
if (temp != temp1) { //两次滚动高度不等，则认为还没有滚动完毕
setTimeout(judge,100);
temp = temp1; //滚动高度赋值
} else{
that.addListener();
temp = null; //放弃引用
}
},100);
});
}
render() {//主渲染函数
const { bookListItems, tabs, current } = this.state;
return (
<div class="guide" ref="guides">
<div class="topTab" ref="topTab">
<div className="historyTabs" ref="tab">
{tabs.map((item, index) => {
return (
<div
key={index}
className={`tab ${index === current ? "tab--select" : ""}`}
onClick={() => {
this.itemNav(index);
}}
ref={`conttab${index}`}
>
{item.name}
</div>
);
})}
</div>
</div>
<div class="course">
<div class="course_msg">
<div class="course_title">Lesson1</div>
<div class="course_name">萨拉和她的谎言</div>
</div>
</div>
{/* 书籍介绍 */}
<div class="intros" ref="cont0"></div>
<div class="intro">
<div class="title">书籍介绍</div>
<div class="intro_content">
<img src="https://ydschool-online.nosdn.127.net/236f374d-fdf8-443c-94da-777749413a9e.png" alt=""/>
<div class="content_detail">
萨拉不小心把妈妈的珍珠项链弄坏了，她怕妈妈责怪她，于是选择了撒谎。然而她每撒一次谎，就会有一个小幽灵从她的嘴里跳出来。最后萨拉大哭起来，把真相告诉了妈妈。
</div>
</div>
{/* 书籍特色 */}
<div class="title_special">书籍特色</div>
<div class="special_content">
<div class="content_title">
<img src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png" alt=""/>
<div class="title_detail">学会勇敢面对错误</div>
</div>
<div class="content_des">在生活中，我们有时也会像萨拉一样做错事，有时也会撒谎。但这个故事能让孩子了解到，相比逃避责任，勇敢面对错误会让内心更加坦然。</div>
</div>
<div class="special_content">
<div class="content_title">
<img src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png" alt=""/>
<div class="title_detail">引导孩子关注情感变化，培养情商</div>
</div>
<div class="content_des">这是一个很容易与孩子产生共鸣的故事。在阅读中，最好能引导孩子去感受主人公的情绪，并探究情绪产生变化的原因。</div>
</div>
<div class="special_content">
<div class="content_title">
<img src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png" alt=""/>
<div class="title_detail">给家长教育启发</div>
</div>
<div class="content_des">其实萨拉妈妈内心知道是萨拉弄坏了项链，但却没有粗暴地揭露，而是耐心等待萨拉自己坦白真相。不要过分苛责孩子的撒谎行为，帮助孩子一起改正，孩子才会有信任感肯讲出真话。</div>
</div>
</div>
{/* 教学目标 */}
<div class="intros" ref="cont1"></div>
<div class="intro">
<div class="title">教学目标</div>
<div class="aims">
<ul>
<li>理解并运用“注意情感的变化”的阅读策略。</li>
<li>能够识别故事中表示感情的词汇和短语。</li>
<li>学会用直面错误的方式解决问题。</li>
</ul>
</div>
</div>
{/* 策略解读 */}
<div class="intros" ref="cont2"></div>
<div class="intro">
<div class="title">策略解读</div>
<div class="strategy">
<div class="top_img">
<div class="text">关注人物情感的变化</div>
</div>
<div class="middle_content">
人物在不同的情况下会表现出不同的情感，而拥有不同的情感时会表现出不同的表情和动作。关注故事中人物情感的变化，可以帮助我们更好地理解故事情节，也能提高情绪的识别能力。
</div>
<div class="middle_content">
在亲子共读的过程中，可以引导孩子有意识地关注书本中描述情感的词语和图中角色的表情和动作，学习识别出不同的情感。当发现人物情感发生变化时，停下来思考一下产生情感变化的原因。比如：这张图萨拉是什么感受呢？你从哪里可以看出来？她的表情是什么样的？她为什么会有这种感觉？
</div>
<div class="inter">
<div class="inter_img">
<img src="https://ydschool-online.nosdn.127.net/34d3dafa-7395-4d13-925b-4c9c0d37a10d.png" alt=""/>
</div>
</div>
</div>
</div>
{/* 话题讨论 */}
<div class="intros" ref="cont3"></div>
<div class="intro">
<div class="title">话题讨论</div>
<div class="dis">
<ul>
<li>
<div class="num">1</div>
<div class="dis_content">
<div class="dis_title">你知道书的封面上这个白色的小人是谁吗？那小幽灵什么时候会出现呢？</div>
<div class="dis_detail"></div>
</div>
</li>
<li>
<div class="num">2</div>
<div class="dis_content">
<div class="dis_title">当妈妈问萨拉有没有看到她的珍珠项链，萨拉说“没有看到”时，她会有什么感觉呢？</div>
<div class="dis_detail"></div>
</div>
</li>
<li>
<div class="num">3</div>
<div class="dis_content">
<div class="dis_title">当萨拉大哭起来，把事情真相告诉了妈妈之后，她又有什么感觉呢？</div>
<div class="dis_detail"></div>
</div>
</li>
<li>
<div class="num">4</div>
<div class="dis_content">
<div class="dis_title">你以前也说过谎吗？当时心里是怎样想的呢？后来又是怎么做的呢？</div>
<div class="dis_detail">参考：鼓励孩子说出自己经历的真实想法，如果没有撒过谎则称赞是个诚实的孩子。</div>
</div>
</li>
<li>
<div class="num">5</div>
<div class="dis_content">
<div class="dis_title">想一想，你以前还听过什么关于撒谎的故事？你觉得撒谎好不好？</div>
<div class="dis_detail">参考：《狼来了》、《匹诺曹》、《皇帝的新装》，引导孩子知道撒谎的坏处：得不到别人的信任，心里会不安，会说越来越多的谎言。</div>
</div>
</li>
</ul>
</div>
</div>
{/* 亲子互动 */}
<div class="intros" ref="cont4"></div>
<div class="intro">
<div class="title">亲子互动</div>
<div class="special_content">
<div class="content_title">
<img src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png" alt=""/>
<div class="title_detail">《匹诺曹》儿歌</div>
</div>
<div class="content_des">
小小木偶真可爱，椭圆脑袋眼睛大。<br/>
爱说谎话真可怕，鼻子变长当惩罚。<br/>
做回诚实好孩子，鼻子恢复正常啦
</div>
</div>
<div class="special_content">
<div class="content_title">
<img src="https://ydschool-online.nosdn.127.net/f5924438-31a1-47ee-b6fc-91436016e911.png" alt=""/>
<div class="title_detail">折叠画：《匹诺曹》</div>
</div>
<div class="content_des">
1.准备一张长长的纸，折叠后变成正常大小<br/>
2.画一个小男孩的脸和头发。<br/>
3.然后展开折纸用连线加长鼻子和脸的轮廓，最后涂上颜色。<br/>
4. 当他说谎时，展开折纸，鼻子就变长啦。
</div>
</div>
<div class="inter">
<div class="inter_text">借这个小手工可以告诉孩子要做一个诚实的好孩子，不能说谎，否则小鼻子会变长呢。</div>
<div class="inter_img">
<img src="https://ydschool-online.nosdn.127.net/34d3dafa-7395-4d13-925b-4c9c0d37a10d.png" alt=""/>
</div>
</div>
</div>
{/* 推荐书目 */}
<div class="intros" ref="cont5"></div>
<div class="intro">
<div class="title">推荐书目</div>
<div class="recommend">
{bookListItems.map(bookItem => {
return this.singleBook(bookItem);
})}
</div>
</div>
<style jsx>{`
.guide {
background: #18CAFF;
padding-bottom: .64rem;
}
.topTab {
display: none;
}
.historyTabs {
position: fixed;
z-index: 3;
padding-left: 0.24rem;
height: 0.44rem;
background: #ffffff;
box-shadow: 0 0 0.1rem 0 rgba(65, 69, 100, 0.1);
color: #999999;
font-size: 0.15rem;
line-height: 0.435rem;
display: -webkit-box;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling:touch;
}
.historyTabs::-webkit-scrollbar{
display: none;
}
.historyTabs .tab {
position: relative;
margin-right: 0.15rem;
}
.historyTabs .tab:last-child{
padding-right: 0.24rem;
}
.historyTabs .tab--select {
color: #444444;
}
.historyTabs .tab--select:after {
position: absolute;
top: 0.12rem;
left: 0.28rem;
display: block;
width: 0.04rem;
height: 0.6rem;
border-radius: 0.02rem;
background-color: #ffd801;
content: "";
transform: rotate(-270deg);
}
.guide .course {
height: 2.26rem;
background: url(https://ydschool-online.nosdn.127.net/61068a9e-4f77-46a5-a9f7-4f81e3e21dd3.png) no-repeat;
background-size: 100%;
display: flex;
justify-content: center;
}
.guide .course .course_msg {
width:3.045rem;
height:.76rem;
background:rgba(255,255,255,1);
border-radius:.15rem;
position: absolute;
top: 1.33rem;
padding-top: .17rem;
padding-left: 0.225rem;
}
.guide .course .course_msg .course_title {
height:.21rem;
font-size:.15rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(68,68,68,1);
line-height:.21rem;
}
.guide .course .course_msg .course_name {
height:.28rem;
font-size:.20rem;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(68,68,68,1);
line-height:.28rem;
margin-top: 0.04rem;
}
.intro {
width: 2.87rem;
padding: 0.4rem .2rem .3rem;
margin: 0 auto;
background: #ffffff;
box-shadow: 0 0.02rem 0.08rem 0 rgba(65,69,100,0.08);
border-radius: 0.15rem;
position: relative;
margin-top: .25rem;
}
.intros {
height: .22rem;
width: 2.87rem;
}
.intro .title {
width:1.01rem;
height:.36rem;
background:rgba(128,117,255,1);
border-radius:0 .3rem .3rem 0;
font-size:.15rem;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(255,255,255,1);
line-height:.36rem;
text-align: center;
position: absolute;
top: -0.1rem;
left: 0;
}
.intro .title_special {
width:1.01rem;
height:.36rem;
background:rgba(128,117,255,1);
border-radius:0 .3rem .3rem 0;
font-size:.15rem;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(255,255,255,1);
line-height:.36rem;
text-align: center;
margin-top: .2rem;
margin-left: -0.2rem;
margin-bottom: 0.15rem;
}
.intro .intro_content {
display:flex;
}
.intro .intro_content img {
display: block;
width: .75rem;
height: 1rem;
border-radius:.06rem;
}
.intro .intro_content .content_detail {
width: 2rem;
margin-left: .15rem;
font-size:.15rem;
font-family:PingFangSC-Light,PingFang SC;
font-weight:300;
color:rgba(68,68,68,1);
line-height:.24rem;
}
.intro .special_content {
margin-top: .2rem;
}
.intro .special_content .content_title {
}
.intro .special_content .content_title img{
display: inline-block;
width: .2rem;
height: .2rem;
float: left;
}
.intro .special_content .content_title .title_detail{
font-size:.16rem;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(68,68,68,1);
line-height:.23rem;
}
.intro .special_content .content_des {
font-size:.15rem;
font-family:PingFangSC-Light,PingFang SC;
font-weight:300;
color:rgba(68,68,68,1);
line-height:.24rem;
margin-top: 0.1rem;
}
.intro .aims {
}
.intro .aims ul li {
display: flex;
justify-content: flex-start;
font-size: 0.15rem;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
padding-left: 0.2rem;
position: relative;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(68,68,68,1);
line-height:.24rem;
}
.intro .aims ul li:before {
display: block;
content: "";
width: 0.1rem;
height: 0.1rem;
border-radius: 0.05rem;
background-color: #FFD801;
position: absolute;
top: 0.06rem;
left: 0;
}
.intro .strategy {
}
.intro .strategy .top_img{
width: 2.87rem;
height: 1rem;
background: url(https://ydschool-online.nosdn.127.net/0ca2439d-ddea-43cd-9329-41cdaed22396.png) no-repeat;
background-size: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.intro .strategy .top_img .text{
font-size:.17rem;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(255,255,255,1);
line-height:.24rem;
}
.intro .strategy .middle_content{
font-size:.15rem;
font-family:PingFangSC-Light,PingFang SC;
font-weight:300;
color:rgba(68,68,68,1);
line-height:.24rem;
margin-top: .15rem;
text-indent: 2em;
}
.intro .dis {
}
.intro .dis ul li {
}
.intro .dis ul li .num{
width:.24rem;
height:.24rem;
border-radius: .12rem;
background:rgba(255,216,1,1);
font-size:.14rem;
font-family:Arial-BoldMT,Arial;
font-weight:normal;
color:rgba(255,255,255,1);
line-height:.24rem;
text-align: center;
float: left;
}
.intro .dis ul li .dis_content{
margin-left: .34rem;
border-bottom: 1px solid #eeeeee;
margin-top: .15rem;
padding-bottom: .15rem;
}
.intro .dis ul li:last-child .dis_content{
border-bottom: none;
padding-bottom: 0;
}
.intro .dis ul li .dis_content .dis_title{
font-size:.15rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(68,68,68,1);
line-height:.24rem;
}
.intro .dis ul li .dis_content .dis_detail{
font-size:.13rem;
font-family:PingFangSC-Light,PingFang SC;
font-weight:300;
color:rgba(102,102,102,1);
line-height:.21rem;
}
.intro .inter {
padding-bottom: .1rem;
}
.intro .inter .inter_text{
font-size:.15rem;
font-family:PingFangSC-Light,PingFang SC;
font-weight:300;
color:rgba(68,68,68,1);
line-height:.24rem;
margin-top: .15rem;
}
.intro .inter .inter_img img{
width: 2.87rem;
margin-top: .15rem;
}
.intro .recommend .recomond {
margin-top: .15rem;
border-bottom: 1px solid #EEEEEE;
}
.intro .recommend .recomond:last-child {
border-bottom: none;
}
.intro .recommend .recomond .top{
display: flex;
justify-content: flex-start;
}
.intro .recommend .recomond .top .top_img img{
width: .75rem;
height: 1rem;
border-radius: .06rem;
}
.intro .recommend .recomond .top .top_des{
margin-left: .15rem;
height: 1rem;
position: relative;
}
.intro .recommend .recomond .top .top_des .top_title{
font-size:.15rem;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(68,68,68,1);
line-height:.23rem;
}
.intro .recommend .recomond .top .top_des .reasonDes{
font-size:.13rem;
font-family:PingFangSC-Light,PingFang SC;
font-weight:300;
color:rgba(68,68,68,1);
line-height:.20rem;
margin-top: 0.035rem;
}
.intro .recommend .recomond .top .top_des .button{
width:1.14rem;
height:.3rem;
background:rgba(255,216,1,1);
box-shadow:0 0.02rem 0.05rem 0 rgba(255,216,1,0.2);
border-radius:.24rem;
display:flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
}
.intro .recommend .recomond .top .top_des .button img{
width: .16rem;
height: .16rem;
}
.intro .recommend .recomond .top .top_des .button .text{
font-size:.12rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(68,68,68,1);
line-height:.17rem;
margin-left: 0.05rem;
}
.intro .recommend .recomond .recommendReason{
margin-top: .15rem;
font-size:.13rem;
font-family:PingFangSC-Light,PingFang SC;
font-weight:300;
color:rgba(102,102,102,1);
line-height:.21rem;
padding-bottom: .15rem;
}
`}</style>
</div>
);
}
}
let domContainer = document.querySelector('#root');
ReactDOM.render(<Guide />, domContainer);
</script>
</body>
</html>
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