|
|
@@ -68,15 +68,20 @@
|
|
|
.tag a {
|
|
|
color: #333;
|
|
|
float: right;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.discuss {
|
|
|
text-align: center;
|
|
|
- background-color: #f5f5f5;
|
|
|
+ /* background-color: #f5f5f5; */
|
|
|
padding: 40px 20px;
|
|
|
- border: 1px solid #ccc;
|
|
|
+ /* border: 1px solid #ccc; */
|
|
|
+ }
|
|
|
+ .discuss button{
|
|
|
+ background-color: #2268D0 !important;
|
|
|
+ border-radius: 20px !important;
|
|
|
+ width: 200px !important;
|
|
|
}
|
|
|
-
|
|
|
.answer {
|
|
|
padding: 20px;
|
|
|
line-height: 26px;
|
|
|
@@ -107,11 +112,22 @@
|
|
|
}
|
|
|
|
|
|
.login_div {
|
|
|
- height: 300px;
|
|
|
- background-image: linear-gradient(90deg, #0B0B0A, #E1CAA0);
|
|
|
+ /* background-image: linear-gradient(90deg, #0B0B0A, #E1CAA0); */
|
|
|
text-align: center;
|
|
|
- padding-top: 140px;
|
|
|
+ padding: 20px;
|
|
|
border-radius: 10px;
|
|
|
+ box-shadow: 0px 0px 4px 0 rgba(0,0,0,.1);
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .login_div button{
|
|
|
+ width: 300px;
|
|
|
+ background-color: #E8E8E8;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .login_div button span{
|
|
|
+ color: #0065D7;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
#list li{
|
|
|
line-height: 30px;
|
|
|
@@ -126,6 +142,25 @@
|
|
|
.part{
|
|
|
padding: 25px;
|
|
|
}
|
|
|
+ .sec_title{
|
|
|
+ color: #0065D7;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ .sec_title span{
|
|
|
+ border-bottom: 3px solid #0065D7;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .avatar{
|
|
|
+ width: 44px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: greenyellow;
|
|
|
+ margin-right: 15px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<body>
|
|
|
@@ -137,8 +172,11 @@
|
|
|
</div>
|
|
|
<div class="nav">
|
|
|
<a class="act" href="/index.html">主页</a>
|
|
|
- <a href="">爬虫比赛</a>
|
|
|
- <a href="">关于猿人学</a>
|
|
|
+ <a href="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
|
|
|
+ <a href="https://match.yuanrenxue.cn/" target="_blank">采集进阶课程</a>
|
|
|
+ <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
|
|
|
+ <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
|
|
|
+ <a href="https://www.yuanrenxue.cn/" target="_blank">关于猿人学</a>
|
|
|
</div>
|
|
|
<div class="login">
|
|
|
<div class="pc">
|
|
|
@@ -157,13 +195,15 @@
|
|
|
<a v-else href="/login.html">请先登录</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</header>
|
|
|
<transition name="slide">
|
|
|
<div class="slide" v-if="show">
|
|
|
- <a class="act" href="/index.html">猿人学面试</a>
|
|
|
- <a href="">爬虫比赛</a>
|
|
|
- <a href="">关于猿人学</a>
|
|
|
+ <a class="act" href="/index.html">主页</a>
|
|
|
+ <a href="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
|
|
|
+ <a href="https://match.yuanrenxue.cn/" target="_blank">采集进阶课程</a>
|
|
|
+ <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
|
|
|
+ <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
|
|
|
+ <a href="https://www.yuanrenxue.cn/" target="_blank">关于猿人学</a>
|
|
|
<a v-if="userInfo" href="/record.html">我的刷题记录</a>
|
|
|
<a v-if="userInfo" @click="logout">退出登录</a>
|
|
|
</div>
|
|
|
@@ -201,45 +241,68 @@
|
|
|
<b style="font-size: 28px;color: #000;">{{detail.name}}</b>
|
|
|
<p class="tag">
|
|
|
<span>{{detail.category}}</span>
|
|
|
- <a href="">分享给朋友</a>
|
|
|
+ <a @click="copy"><img style="position: relative;top: 5px;" width="20" src="img/share.png" alt=""> 分享给朋友</a>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="part">
|
|
|
- <h2 class="sec_title"><span>答题讨论</span></h2>
|
|
|
+ <h2 class="sec_title"><span>优秀回答</span></h2>
|
|
|
<div class="discuss answer" v-if="userInfo">
|
|
|
{{detail.content}}
|
|
|
</div>
|
|
|
<div class="discuss" v-else>
|
|
|
- <button @click="login">请登录</button>
|
|
|
+ <button @click="login">点击登录查看完整内容</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="part">
|
|
|
- <h2 class="sec_title"><span>网友热议</span></h2>
|
|
|
+ <h2 class="sec_title"><span>讨论回答</span></h2>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <span class="avatar" :style="{background:getColor()}">
|
|
|
+ {{userInfo.name?userInfo.name[0]:'x'}}
|
|
|
+ </span>
|
|
|
+ <div class="login_div" v-if="!userInfo" style="width: 90%;">
|
|
|
+ <button @click="login">你需要<span>注册/登录</span>才可以分享内容哦</button>
|
|
|
+ </div>
|
|
|
+ <div class="comment" v-else style="width: 90%;margin-bottom: 15px;">
|
|
|
+ <textarea v-model="form.content" placeholder="留下你的想法..."></textarea>
|
|
|
+ <button style="width: 100px;" @click="sendComment">提交评论</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<template v-for="(item,index) in comment">
|
|
|
<template v-if="index == 0">
|
|
|
- <p class="user">
|
|
|
- {{item.cname}} {{item.ctime}}
|
|
|
- </p>
|
|
|
- <p class="ans">
|
|
|
- {{item.content}}
|
|
|
- </p>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <span class="avatar" :style="{background:getColor()}">{{item.cname[0]}}</span>
|
|
|
+ <div>
|
|
|
+ <p class="user">
|
|
|
+ <b style="color: #000;">{{item.cname}}</b>
|
|
|
+ </p>
|
|
|
+ <p class="ans">
|
|
|
+ {{item.content}}
|
|
|
+ </p>
|
|
|
+ <p class="user">
|
|
|
+ {{item.ctime}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<template v-else-if="index > 0 && userInfo">
|
|
|
- <p class="user">
|
|
|
- {{item.cname}} {{item.ctime}}
|
|
|
- </p>
|
|
|
- <p class="ans">
|
|
|
- {{item.content}}
|
|
|
- </p>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <span class="avatar" :style="{background:getColor()}">{{item.cname[0]}}</span>
|
|
|
+ <div>
|
|
|
+ <p class="user">
|
|
|
+ <b style="color: #000;">{{item.cname}}</b>
|
|
|
+ </p>
|
|
|
+ <p class="ans">
|
|
|
+ {{item.content}}
|
|
|
+ </p>
|
|
|
+ <p class="user">
|
|
|
+ {{item.ctime}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</template>
|
|
|
- <div class="login_div" v-if="!userInfo">
|
|
|
- <button @click="login">登录后查看全部</button>
|
|
|
- </div>
|
|
|
- <div class="comment" v-if="userInfo">
|
|
|
- <textarea v-model="form.content" placeholder="留下你的想法..."></textarea>
|
|
|
- <button style="width: 100px;" @click="sendComment">提交评论</button>
|
|
|
- </div>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="left search_left phone">
|
|
|
@@ -266,6 +329,34 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <footer>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <b>爬虫比赛</b> <br>
|
|
|
+ <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
|
|
|
+ <a href="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
|
|
|
+ <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <b>爬虫课程</b> <br>
|
|
|
+ <a href="https://shop45147253.m.youzan.com/wscgoods/detail/2okabph85ypv1?banner_id=f.86209928~goods.2~1~rVebiaQ5&alg_id=0&slg=0&components_style_layout=0&reft=1744878857227&spm=f.86209928&sf=wx_sm" target="_blank">爬虫逆向进阶课</a>
|
|
|
+ <a href="https://shop45147253.m.youzan.com/wscgoods/detail/2xli2kj7ku3a5zk?banner_id=f.86209928~goods.2~2~lWrtebiJ&alg_id=0&slg=0&components_style_layout=0&reft=1744878880491&spm=f.86209928&sf=wx_sm" target="_blank">反爬&风控对抗课</a>
|
|
|
+ <a href="https://shop45147253.m.youzan.com/wscgoods/detail/361rmliyhfwr184?banner_id=f.86209928~goods.2~3~25r4gDL2&alg_id=0&slg=0&components_style_layout=0&reft=1744878921640&spm=f.86209928&sf=wx_sm" target="_blank">0基础+爬虫逆向课</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <b>关于猿人学</b> <br>
|
|
|
+ <a href="https://www.yuanrenxue.cn/tricks" target="_blank">Python技术杂谈</a>
|
|
|
+ <a href="https://www.yuanrenxue.cn/earn-money" target="_blank">Python爬虫挣钱</a>
|
|
|
+ </li>
|
|
|
+ <li class="contact" style="display: flex;line-height: 30px;">
|
|
|
+ <img style="margin-right: 10px;" width="100" height="100" src="img/wx.jpg" alt="">
|
|
|
+ 扫一扫加我微信 <br>
|
|
|
+ 备注面试题 <br>
|
|
|
+ 拉你进面试交流群
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <p>成都老猿智能科技有限公司Copyright @ 2025 猿人学面试 蜀ICP备2022000052号-2</p>
|
|
|
+ </footer>
|
|
|
</section>
|
|
|
<script src="js/public.js"></script>
|
|
|
<script>
|
|
|
@@ -306,6 +397,13 @@
|
|
|
login() {
|
|
|
window.location.href = '/login.html';
|
|
|
},
|
|
|
+ getColor() {
|
|
|
+ // 生成随机饱和度低的颜色
|
|
|
+ const r = Math.floor(Math.random() * 128)+120; // 随机生成 0-127 的红色值
|
|
|
+ const g = Math.floor(Math.random() * 128)+120; // 随机生成 0-127 的绿色值
|
|
|
+ const b = Math.floor(Math.random() * 128)+120; // 随机生成 0-127 的蓝色值
|
|
|
+ return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
|
|
|
+ },
|
|
|
getData() {
|
|
|
// 列表
|
|
|
axios.get(url + '/api/yrx/que/info?interviewId=' + this.id).then(res => {
|
|
|
@@ -398,6 +496,17 @@
|
|
|
localStorage.removeItem('userInfo');
|
|
|
localStorage.removeItem('token');
|
|
|
this.userInfo = null;
|
|
|
+ },
|
|
|
+ copy(){
|
|
|
+ const text = window.location.href;
|
|
|
+ navigator.clipboard.writeText(text)
|
|
|
+ .then(() => {
|
|
|
+ alert('链接已复制，求分享给好友吧！');
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ alert('复制失败，请重试。');
|
|
|
+ console.error('复制失败：', error);
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
}).mount('#app');
|
