master

分支 (1)

管理

管理

master

alipay-platform
/
communication.html

<!--
    支付宝社区里面的交流专区
 * @Author: 陈茂冬
 * @Date: 2021-08-09 20:44:37
 * @LastEditTime: 2021-08-17 08:25:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \支付宝\js\communication.html
-->
<!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>交流专区</title>
    <!-- 外部引入：公共的    对应的交流专区 -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/communication.css">
    <link rel="stylesheet" href="font/css/font-awesome.css">
    <link rel="stylesheet" href="css/animate.css">
    <style>
        body {
            width: 1263.33px;
            padding: 0;
            margin: 0 auto;
            background-color: #f3f5f6;
        }

        .header {
            height: 60px;
            background-color: #151a29;
            padding: 180x 20px 20px 26px;
        }

        .logo {
            width: 60px;
            height: 22px;
            padding-top: 20px;
            padding-left: 20px;
            float: left;
            /* background-image: url('img/logo.png'); */
        }

        .menu {
            float: left;
            box-sizing: border-box;
            font-size: 14px;
            float: left;
            margin-left: 60px;
            margin-top: 20px;
        }

        /* .community {
            color: #fff;
        } */
        .communication {
            color: #1890ff;
            margin-left: 50px;
        }

        .learn {
            color: #fff;
            margin-left: 50px;
        }

        .search {
            float: right;
            margin-top: 10px;
            margin-right: 20px;
        }

        .banner {
            width: 100%;
            height: 272px;
            background-image: url('img/banner1.png');
            background-size: cover;
            background-position: center;
        }

        .biaoti {
            float: left;
            margin-top: 50px;
            margin-left: 40px;
        }

        .content {
            width: 1215px;
            padding: 41px 0;
        }

        .announce {
            width: 789px;
            height: 16px;
            background: #fff;
            padding: 25px 25px 25px 21px;
            margin: 0 20px 20px;
            border-radius: 8px;
        }

        .announce>.relate {
            float: left;
        }

        .announce>.more {
            float: right;
            line-height: 18px;
        }

        .post {
            width: 755px;
            height: 1500px;
            background-color: #fff;
            padding: 25px 40px 25px 40px;
            margin: 0 20px 20px;
            border-radius: 8px;
        }

        .post>.top>.all {
            float: left;
        }

        .top {
            border-bottom: 1px solid #999;
            padding-bottom: 50px;
        }

        .all1,
        .all2,
        .all3,
        .all4 {
            float: left;
            margin-left: 40px;
        }

        .post>.top>.button {
            float: right;
            color: #3f8efc;
        }

        .one {
            margin-top: 50px;
        }

        .post>.one>.fu>.ding {
            margin-top: 20px;
        }

        .text1 {
            margin-left: 10px;
            color: #333;
        }

        .text2 {
            color: #999;
            font-size: 14px;
        }

        .biankuang {
            padding-left: 20px;
            margin-bottom: 10px;
        }

        .biankuang2 {
            padding-right: 20px;
            margin-bottom: 10px;
        }

        .lie1 {
            float: left;
        }

        .lie2 {
            float: right;
            margin-right: 40px;
        }

        .touxiang {
            width: 22px;
            border-radius: 50%;
            border: 1px solid #aaa;
            position: relative;
            top: 5px;
            /* margin-left: 20px; */
            /* float: left; */
        }


        .img {
            width: 22px;
            border-radius: 50%;
            border: 1px solid #aaa;
            margin-left: 20px;
            float: left;
        }

        .img:hover {
            animation: pulse 2s forwards;
            cursor: pointer;
        }

        .detail {
            border-bottom: 1px solid #999;
            padding-bottom: 50px;
        }

        .detail-right {
            float: right;
            margin-right: 50px;
        }

        .tubiao {
            margin-right: 20px;
        }

        /* .tubiao:hover {
            animation: pulse 2s forwards;
            cursor: pointer;
        } */

        .content>div:nth-child(1) {
            float: right;
        }

        .right-1 {
            width: 312px;
            height: 162px;
            background-color: #fff;
            padding: 20px 23px;
            margin: 0 -20px 20px 20px;
            border-radius: 8px;
        }

        .honor {
            /* float: left; */
            font-size: 20px;
            color: #333;
            margin-top: 0;
        }

        /* .how {
            float: right;
            font-size: 12px;
            color: #999;
            margin-top: 10px;
        }
        right-1-1::after{
            content:'';
            display: block;
            clear:both;
            } */

        /* .third-1 {
            float: left;
        }
        .third-2 {
            float: right;
        } */
        .right-2 {
            width: 312px;
            height: 256.333px;
            background-color: #fff;
            padding: 20px 23px;
            margin: 0 -20px 20px 20px;
            border-radius: 8px;
        }


        .right-3 {
            width: 312px;
            height: 109.333px;
            background-color: #fff;
            padding: 20px 23px;
            margin: 0 -20px 20px 20px;
            border-radius: 8px;
        }

        .right-4 {
            width: 312px;
            height: 109.333px;
            background-color: #fff;
            padding: 20px 23px;
            margin: 0 -20px 20px 20px;
            border-radius: 8px;
        }

        .right-5 {
            width: 312px;
            height: 211.333px;
            background-color: #fff;
            padding: 20px 23px;
            margin: 0 -20px 20px 20px;
            border-radius: 8px;
        }

        .right-6 {
            width: 312px;
            padding: 10px 23px;
            border-radius: 8px;
        }

        .wenzi {
            margin-bottom: 10px;
        }

        .footer {
            text-align: center;
            font-size: 12px;
            color: #999;
            margin-top: -10px;
            height: 60px;
            line-height: 60px;
        }

        #back {
            width: 24px;
            height: 24px;
            position: fixed;
            z-index: 10000;
            right: 25px;
            bottom: 100px;
        }
    </style>
</head>

<body>
    <div class="header" id="pu">
        <div class="logo">
            <a href="Homepage.html"><img
                    src="https://gw.alipayobjects.com/zos/bmw-prod/7061fe82-8281-41c2-9f92-86188ced7159.svg"
                    style="width: 140px; height: 20px;"></a>
        </div>
        <div class="menu">
            <!-- <span class="community">开放社区</span> -->
            <span class="communication">交流专区</span>
            <span class="learn"><a href="learn.html" style="color: #fff;text-decoration: none;">学习专区</a></span>
        </div>
        <div class="search">
            <input type="text" placeholder="搜索你需要的内容" style="width: 200px;height: 32px;">
            <a href="login.html"><span style="color: #f3f5f6;margin-left: 10px;">登录</span></a>
        </div>
        <img src="img/搜索--1.png" style="width: 30px;height: 30px;float: right;margin-right: 10px;margin-top: 10px;">
    </div>
    <div class="banner">
        <div class="biaoti">
            <p style="font-size: 36px;">盛夏已至，加速成长</p>
            <p style="font-size: 20px;">在社区，分享技术干货</p>
        </div>
    </div>

    <div class="content">
        <div class="right">
            <div class="right-1">
                <div>
                    <p class="honor">7月社区荣誉榜</p>
                    <!-- <p class="how">如何上榜?</p> -->
                </div>
                <div class="lie1">
                    <div class="biankuang">
                        <img class="touxiang" src="img/6月社区荣誉榜-布道师1.png">
                        <span>布道师</span>
                    </div>
                    <div class="biankuang">
                        <img class="touxiang" src="img/6月社区荣誉榜-贡献达人2.png">
                        <span>贡献达人</span>
                    </div>
                    <div class="biankuang">
                        <img class="touxiang" src="img/6月社区荣誉榜-巴青3.jpg">
                        <span>巴青</span>
                    </div>
                </div>
                <div class="lie2">
                    <div class="biankuang2">
                        <img class="touxiang" src="img/6月社区荣誉榜-青团社郝帅4.jpg">
                        <span>青团社</span>
                    </div>
                    <div class="biankuang2">
                        <img class="touxiang" src="img/6月社区荣誉榜-支付宝开放社区5.jpg">
                        <span>支付宝</span>
                    </div>
                    <div class="biankuang2">
                        <img class="touxiang" src="img/6月社区荣誉榜-堪笑6.jpg">
                        <span>堪笑</span>
                    </div>
                </div>

            </div>
            <div class="right-2">
                <div>
                    <p class="honor">推荐主页</p>
                </div>
                <div>
                    <button style="margin: 10px;">#技术认证</button>
                    <button style="margin: 10px;">#云支付</button>
                    <button style="margin: 10px;">#MiniU</button>
                    <button style="margin: 10px;">#API</button>
                    <button style="margin: 10px;">#LOT小程序</button>
                    <button style="margin: 10px;">#MAS小程序</button>
                    <button style="margin: 10px;">#AMPE小程序引擎服务</button>
                    <button style="margin: 10px;">#行业场景组件及效能</button>
                </div>
            </div>
            <div class="right-3">
                <div>
                    <p class="honor">最新活动</p>
                    <ul>
                        <li class="wenzi">#MiniU正式上线 - 如何使用MiniU丝滑地开发小程序</li>
                        <li class="wenzi">支付宝开放平台文档“捉虫”征集令</li>
                    </ul>
                </div>
            </div>
            <div class="right-4">
                <div>
                    <p class="honor">热门文章</p>
                    <ul>
                        <li class="wenzi">【社区每周】JSAPI 文档新增适用范围说明啦！！！（2021年8月第二期）</li>
                        <li class="wenzi">小程序上架需要办理哪些许可证？</li>
                    </ul>
                </div>
            </div>
            <div class="right-5">
                <div>
                    <p class="honor">热门回答</p>
                    <ul>
                        <li class="wenzi">调用间连商户活动报名接口</li>
                        <li class="wenzi">API应用申请类型过少</li>
                        <li class="wenzi">"推"模式报销 向支付宝 antinvoice</li>
                        <li class="wenzi">【文档反馈】路由 FAQ</li>
                        <li class="wenzi">调用间连商户活动报名接口</li>
                    </ul>
                </div>
            </div>
            <div class="right-6">
                <img src="img/黑板报.png">
            </div>

        </div>
        <div class="left">
            <div class="announce">
                <img src="img/喇叭.png" style="height: 20px;padding-right: 20px;float: left;">
                <div class="relate">
                    公告&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    关于服务竞争力指数（SCI）评估模型升级的公示通知
                </div>
                <div class="more">
                    <p>更多公告</p>
                </div>
            </div>
            <div class="post">
                <div class="top">
                    <div class="all">
                        <div class="all1">全部</div>
                        <div class="all2">问答</div>
                        <div class="all3">文章</div>
                        <div class="all4">话题</div>
                    </div>
                    <div class="button"><button>发帖</button></div>
                </div>

                <div class="one">
                    <div class="fu">
                        <div class="ding"><button style="float: left;">置顶</button></div>
                        <span class="text1">【社区每周】JSAPI 文档新增适用范围说明啦！！！（2021年8月第二期）</span>
                    </div>
                    <div class="text2">
                        <p>运营修订《小程序/生活号命名规范》、新增《商家会员运营管理规范》，更新《转账到支付宝账户产品介绍》。</p>
                    </div>
                    <div>
                        <div class="detail">
                            <button style="float: left;">文章</button>
                            <img src="img/头像1.jpg" class="img">
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">支付宝开放社区</span>
                            <button style="float: left;margin-left: 10px;">官方</button>
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">两天前</span>
                            <div class="detail-right">
                                <span class="tubiao"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>1000</span>
                                <span class="tubiao"><i class="fa fa-commenting-o" aria-hidden="true"></i>234</span>
                                <span class="tubiao"><i class="fa fa-eye" aria-hidden="true"></i>1233</span>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="one">
                    <div class="fu">
                        <div class="ding"><button style="float: left;">置顶</button></div>
                        <span class="text1">【社区每周】JSAPI 文档新增适用范围说明啦！！！（2021年8月第二期）</span>
                    </div>
                    <div class="text2">
                        <p>运营修订《小程序/生活号命名规范》、新增《商家会员运营管理规范》，更新《转账到支付宝账户产品介绍》。</p>
                    </div>
                    <div>
                        <div class="detail">
                            <button style="float: left;">文章</button>
                            <img src="img/头像2.jpg" class="img">
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">支付宝开放社区</span>
                            <button style="float: left;margin-left: 10px;">官方</button>
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">两天前</span>
                            <div class="detail-right">
                                <span class="tubiao"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>1980</span>
                                <span class="tubiao"><i class="fa fa-commenting-o" aria-hidden="true"></i>294</span>
                                <span class="tubiao"><i class="fa fa-eye" aria-hidden="true"></i>1297</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="one">
                    <div class="fu">
                        <div class="ding"><button style="float: left;">置顶</button></div>
                        <span class="text1">【社区每周】JSAPI 文档新增适用范围说明啦！！！（2021年8月第二期）</span>
                    </div>
                    <div class="text2">
                        <p>运营修订《小程序/生活号命名规范》、新增《商家会员运营管理规范》，更新《转账到支付宝账户产品介绍》。</p>
                    </div>
                    <div>
                        <div class="detail">
                            <button style="float: left;">文章</button>
                            <img src="img/头像3.jpg" class="img">
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">支付宝开放社区</span>
                            <button style="float: left;margin-left: 10px;">官方</button>
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">两天前</span>
                            <div class="detail-right">
                                <span class="tubiao"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>1230</span>
                                <span class="tubiao"><i class="fa fa-commenting-o" aria-hidden="true"></i>2444</span>
                                <span class="tubiao"><i class="fa fa-eye" aria-hidden="true"></i>17653</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="one">
                    <div class="fu">
                        <div class="ding"><button style="float: left;">置顶</button></div>
                        <span class="text1">【社区每周】JSAPI 文档新增适用范围说明啦！！！（2021年8月第二期）</span>
                    </div>
                    <div class="text2">
                        <p>运营修订《小程序/生活号命名规范》、新增《商家会员运营管理规范》，更新《转账到支付宝账户产品介绍》。</p>
                    </div>
                    <div>
                        <div class="detail">
                            <button style="float: left;">文章</button>
                            <img src="img/头像4.jpg" class="img">
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">支付宝开放社区</span>
                            <button style="float: left;margin-left: 10px;">官方</button>
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">两天前</span>
                            <div class="detail-right">
                                <span class="tubiao"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>13244</span>
                                <span class="tubiao"><i class="fa fa-commenting-o" aria-hidden="true"></i>2434</span>
                                <span class="tubiao"><i class="fa fa-eye" aria-hidden="true"></i>1334</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="one">
                    <div class="fu">
                        <div class="ding"><button style="float: left;">置顶</button></div>
                        <span class="text1">【社区每周】JSAPI 文档新增适用范围说明啦！！！（2021年8月第二期）</span>
                    </div>
                    <div class="text2">
                        <p>运营修订《小程序/生活号命名规范》、新增《商家会员运营管理规范》，更新《转账到支付宝账户产品介绍》。</p>
                    </div>
                    <div>
                        <div class="detail">
                            <button style="float: left;">文章</button>
                            <img src="img/头像8.jpg" class="img">
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">支付宝开放社区</span>
                            <button style="float: left;margin-left: 10px;">官方</button>
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">两天前</span>
                            <div class="detail-right">
                                <span class="tubiao"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>1645</span>
                                <span class="tubiao"><i class="fa fa-commenting-o" aria-hidden="true"></i>344</span>
                                <span class="tubiao"><i class="fa fa-eye" aria-hidden="true"></i>13324</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="one">
                    <div class="fu">
                        <div class="ding"><button style="float: left;">置顶</button></div>
                        <span class="text1">【社区每周】JSAPI 文档新增适用范围说明啦！！！（2021年8月第二期）</span>
                    </div>
                    <div class="text2">
                        <p>运营修订《小程序/生活号命名规范》、新增《商家会员运营管理规范》，更新《转账到支付宝账户产品介绍》。</p>
                    </div>
                    <div>
                        <div class="detail">
                            <button style="float: left;">文章</button>
                            <img src="img/头像7.jpg" class="img">
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">支付宝开放社区</span>
                            <button style="float: left;margin-left: 10px;">官方</button>
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">两天前</span>
                            <div class="detail-right">
                                <span class="tubiao"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>1343</span>
                                <span class="tubiao"><i class="fa fa-commenting-o" aria-hidden="true"></i>234</span>
                                <span class="tubiao"><i class="fa fa-eye" aria-hidden="true"></i>1343</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="one">
                    <div class="fu">
                        <div class="ding"><button style="float: left;">置顶</button></div>
                        <span class="text1">【社区每周】JSAPI 文档新增适用范围说明啦！！！（2021年8月第二期）</span>
                    </div>
                    <div class="text2">
                        <p>运营修订《小程序/生活号命名规范》、新增《商家会员运营管理规范》，更新《转账到支付宝账户产品介绍》。</p>
                    </div>
                    <div>
                        <div class="detail">
                            <button style="float: left;">文章</button>
                            <img src="img/头像6.jpg" class="img">
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">支付宝开放社区</span>
                            <button style="float: left;margin-left: 10px;">官方</button>
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">两天前</span>
                            <div class="detail-right">
                                <span class="tubiao"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>132442</span>
                                <span class="tubiao"><i class="fa fa-commenting-o" aria-hidden="true"></i>24323</span>
                                <span class="tubiao"><i class="fa fa-eye" aria-hidden="true"></i>34224</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="one">
                    <div class="fu">
                        <div class="ding"><button style="float: left;">置顶</button></div>
                        <span class="text1">【社区每周】JSAPI 文档新增适用范围说明啦！！！（2021年8月第二期）</span>
                    </div>
                    <div class="text2">
                        <p>运营修订《小程序/生活号命名规范》、新增《商家会员运营管理规范》，更新《转账到支付宝账户产品介绍》。</p>
                    </div>
                    <div>
                        <div class="detail">
                            <button style="float: left;">文章</button>
                            <img src="img/头像5.jpg" class="img">
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">支付宝开放社区</span>
                            <button style="float: left;margin-left: 10px;">官方</button>
                            <span style="float: left;margin-left: 10px;color: #999;font-size: 14px;">两天前</span>
                            <div class="detail-right">
                                <span class="tubiao"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>1230</span>
                                <span class="tubiao"><i class="fa fa-commenting-o" aria-hidden="true"></i>244</span>
                                <span class="tubiao"><i class="fa fa-eye" aria-hidden="true"></i>3242</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div id="back"><i class="fa fa-arrow-circle-up" aria-hidden="true" style="width: 50px;"></i><a href="#pu">返回顶部</a>
    </div>
    <div class="footer">
        <p>Copyright © 2021 支付宝（杭州）信息技术有限公司 ｜ ICP证浙B2-20160559</p>
    </div>
</body>

</html>