master

分支 (1)

管理

管理

master

rencheng
/
streetDetails.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>任城统计大数据平台</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1460471_28h1ax8hlh.css">
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>

<body>
    <div id="canvas">
        <div class="work-header over">
                <a href="./index.html" class="work-header__logo flf" style="display: block;">
                    <img src="./img/logo.png" style="display:block;height: 100%;" alt="">
                </a>
            <div class="work-header__position">
            </div>
            <div class="work-header__user flr">
                <div class="work-header__message over">
                    <i class="flf iconfont icon-xiaoxi1"></i>
                    <p class="flf work-header__message__button">消息</p>
                </div>
                <div class="work-header__my">
                    <el-dropdown>
                        <img src="./img/head.jpg" alt="">
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>用户信息</el-dropdown-item>
                            <el-dropdown-item>用户信息</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="work-header__logout">
                    <i class=" iconfont icon-tuichu1"></i>
                </div>
            </div>
        </div>
        <div class="work-content">
            <el-row :gutter="20">
                <el-col :span="4" class="work-content__menu">
                    <el-card class="box-card">
                        <h4><b>系统管理</b><span>&nbsp;&nbsp;(任城平台)</span></h4>
                        <a :href="info.href" style="display: block;overflow: hidden;text-decoration: none;"
                            :class="['work-content__menu__list',info.icon == 'icon-gaosugongluyunyingshujufenxi' ? 'work-content--active' : '']"
                            v-for="info in menus" :key="info.icon">
                            <!-- <a :href="info.href" style="display: block;overflow: hidden;text-decoration: none;"> -->
                            <i :class="['iconfont', info.icon]"></i>
                            <p class="work-content__article">{{info.name}}</p>
                            <i class="work-content__details iconfont icon-ic_arrow_r"></i>
                            <!-- </a> -->
                        </a>
                    </el-card>
                </el-col>
                <el-col :span="20" class="work-content__body">
                    <div class="work-content__nav">
                        <a href="./street.html" style="text-decoration: none;"><i
                                class="iconfont icon-fanhui work-content__nav__back"></i></a>
                        <a href="./street.html" style="text-decoration: none;">
                            <p class="work-content__nav__menu">街道概览</p>
                        </a>
                        <p class="work-content__nav__menu work-content__nav__menu--active">街道详情</p>
                    </div>
                    <el-scrollbar style="height: calc(100% - 65px);">
                        <el-card class="box-card work-content__body__substance">
                            <h5>金城街道信息介绍</h5>
                            <p class="work-content__body__text">
                                    金城街道位于山东省济宁市中心城区西部，面积4.75平方公里，城区主要干道洸河路、常青路、古槐路、共青团路、金宇路贯穿其中，交通便利、环境优美，辖11个社区居委会，3个行政村，人口87556人（2010年），人口自然增长率为4.7‰。街道2012年实现地方财政收入17580万元，总量位于全区第一位；完成招商引资5.2亿元，占年任务的130%；引进项目48个，其中计划总投资过亿元项目18个、过十亿元大项目2个，固定资产投资完成16.1亿元。辖区有中学1处，小学2处，在校学生2196人，适龄儿童入学率100%。有医院3处。新农合参合人数730人，参合率达100%；办理城镇居民基本养老保险4041人、基本医疗保险8056人；办理城市低保985人，最低生活标准每人每月400元，月平均发放低保金23.09万元。有3处老年公寓，入住150人。

                            </p>
                        </el-card>
                        <div class="work-content__body__card">
                            <el-row class="work-content__body__card__box" :gutter="20">
                                <el-col v-for="po in people.where.filter( s => s.tax != 1)" :span="6"
                                    class="work-content__body__card__info">
                                    <div class="work-content__body__detail">
                                        <div class="work-content__body__title">
                                            <div class="yellow"></div>
                                            <p><b>工作人员：</b>{{po.xingming}}</p>
                                        </div>
                                        <div class="work-content__body__center">
                                            <div class="work-content__body__header">
                                                <img src="./img/head.jpg" alt="">
                                            </div>
                                            <div class="work-content__body__message">
                                                <p><b>办公室电话：</b>{{po.dianhua || '暂无'}}</p>
                                                <p><b>负责类目：</b>{{po.fuze || '暂无'}}</p>
                                            </div>
                                        </div>
                                        <img class="backs" src="./img/people.png" alt="">
                                    </div>
                                </el-col>
                            </el-row>
                            <!-- <el-row class="work-content__body__card__box" :gutter="20">
                                <el-col :span="6" class="work-content__body__card__info">
                                    <div class="work-content__body__detail">
                                        <div class="work-content__body__title">
                                            <div class="yellow"></div>
                                            <p><b>工作人员：</b>张三</p>
                                        </div>
                                        <div class="work-content__body__center">
                                            <div class="work-content__body__header">
                                                <img src="./img/head.jpg" alt="">
                                            </div>
                                            <div class="work-content__body__message">
                                                <p><b>所在街区：</b>金城街道</p>
                                                <p><b>负责企业：</b>济宁鹌鹑蛋加工厂、济宁鹌鹑蛋加工厂</p>
                                            </div>
                                        </div>
                                        <img class="backs" src="./img/people.png" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="6" class="work-content__body__card__info">
                                    <div class="work-content__body__detail">
                                        <div class="work-content__body__title">
                                            <div class="yellow"></div>
                                            <p><b>工作人员：</b>张三</p>
                                        </div>
                                        <div class="work-content__body__center">
                                            <div class="work-content__body__header">
                                                <img src="./img/head.jpg" alt="">
                                            </div>
                                            <div class="work-content__body__message">
                                                <p><b>所在街区：</b>金城街道</p>
                                                <p><b>负责企业：</b>济宁鹌鹑蛋加工厂、济宁鹌鹑蛋加工厂</p>
                                            </div>
                                        </div>
                                        <img class="backs" src="./img/people.png" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="6" class="work-content__body__card__info">
                                    <div class="work-content__body__detail">
                                        <div class="work-content__body__title">
                                            <div class="yellow"></div>
                                            <p><b>工作人员：</b>张三</p>
                                        </div>
                                        <div class="work-content__body__center">
                                            <div class="work-content__body__header">
                                                <img src="./img/head.jpg" alt="">
                                            </div>
                                            <div class="work-content__body__message">
                                                <p><b>所在街区：</b>金城街道</p>
                                                <p><b>负责企业：</b>济宁鹌鹑蛋加工厂、济宁鹌鹑蛋加工厂</p>
                                            </div>
                                        </div>
                                        <img class="backs" src="./img/people.png" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="6" class="work-content__body__card__info">
                                    <div class="work-content__body__detail">
                                        <div class="work-content__body__title">
                                            <div class="yellow"></div>
                                            <p><b>工作人员：</b>张三</p>
                                        </div>
                                        <div class="work-content__body__center">
                                            <div class="work-content__body__header">
                                                <img src="./img/head.jpg" alt="">
                                            </div>
                                            <div class="work-content__body__message">
                                                <p><b>所在街区：</b>金城街道</p>
                                                <p><b>负责企业：</b>济宁鹌鹑蛋加工厂、济宁鹌鹑蛋加工厂</p>
                                            </div>
                                        </div>
                                        <img class="backs" src="./img/people.png" alt="">
                                    </div>
                                </el-col>
                            </el-row> -->
                        </div>
                        <div class="work-content__body__details">
                            <div class="colors">

                            </div>
                            <img src="./img/news.png" alt="">
                            <div class="work-content__body__cop">
                                <h6>金城街道项目内容介绍</h6>
                                <p>为全面深入服务辖区企业，了解企业真实发展需求，扶持企业发展，落实各项优惠政策，街道设立“企业之家”，加强与企业沟通联系，及时解决企业发展中遇到的问题。街道把与企业有关的扶持政策做了统一的规范和梳理，帮助企业有效地贯彻落实，并在政策服务层面积极的为企业答疑解惑。下一步街道将不断完善和改进统计网格化建设，努力实现统计服务上新台阶，力求统计科学化现代化，提高统计数据的及时性完整性和准确性。
                                </p>
                            </div>
                        </div>
                    </el-scrollbar>
                </el-col>
            </el-row>
        </div>
    </div>
</body>
<style>
    /* base */
    * {
        margin: 0px;
        padding: 0px;
    }

    .over {
        overflow: hidden;
    }

    .flf {
        float: left;
    }

    .flr {
        float: right;
    }


    body {
        background: #e9ecf3;
        font-size: 18px;
    }

    .work-header {
        height: 70px;
        width: 100%;
        background: #2184d8;
    }

    /* 头部 */
    .work-header {
        overflow: hidden;
    }

    .work-header__message {
        line-height: 70px;
        ;
    }

    .work-header__logo {
        display: block;
        height: 40px;
        margin-top: 15px;
        margin-left: 80px;
    }

    .work-header__position {
        float: left;
        line-height: 70px;
        margin-left: 7%;
        color: white;
        font-size: .9rem;
    }

    .work-header__position a {
        color: white;
    }

    .work-header__user {
        float: right;
        margin-right: 24px;
    }

    .work-header__user p {
        float: left;
        margin: 0px 6px;
    }

    .work-header__user i {
        float: left;
        line-height: 70px;
        color: white;
        margin: 0px 6px;
    }

    .work-header__message {
        float: left;
        height: 100%;
        padding: 0px 10px;
        cursor: pointer;
        transition: .3s all;
    }

    .work-header__message:hover {
        background: #1a74c0;
    }

    .work-header__my {
        float: left;
        height: 100%;
        padding: 0px 10px;
        cursor: pointer;
        transition: .3s all;
    }

    .work-header__my:hover {
        background: #1a74c0;
    }

    .work-header__my img {
        width: 40px;
        height: 40px;
        border-radius: 1000px;
        margin-top: 15px;
    }

    .work-header__logout {
        float: left;
        height: 100%;
        padding: 0px 10px;
        cursor: pointer;
        transition: .3s all;
    }

    .work-header__logout:hover {
        background: #1a74c0;
    }

    .work-header__message__button {
        font-size: 1rem;
        color: white;
    }

    /* 工作区 */
    .work-content {
        padding: 24px;
    }

    .work-content__menu h4 {
        padding-top: 16px;
        font-size: 1.1rem;
        line-height: 35px;
        margin-left: 10px;
    }

    .work-content__menu span {
        text-indent: 1em;
        font-size: .5rem;
    }

    .work-content .box-card .work-content__menu__list {
        cursor: pointer;
        overflow: hidden;
        transition: .3s all;
        padding: 15px 10px;
        border-radius: 3px;
        margin-top: 12px;
    }

    .work-content .iconfont {
        color: #485a6a;
        font-size: 1.8rem;
        float: left;
        line-height: 25px;
        display: block;
        transition: .3s all;
    }

    .work-content p {
        line-height: 25px;
        font-size: .8rem;
        color: #485a6a;
        float: left;
    }

    .work-content .work-content__article {
        margin-left: 16px;
    }

    .work-content .work-content__details {
        float: right;
    }

    .work-content .box-card .work-content__menu__list:hover {
        background: #1a74c0;
    }

    .work-content .box-card .work-content__menu__list:hover p {
        color: white;
    }

    .work-content .box-card .work-content__menu__list:hover .iconfont {
        color: white;
    }

    .work-content--active {
        background: #1a74c0;
    }

    .work-content--active .iconfont {
        color: white;

    }

    .work-content--active p {
        color: white;

    }

    /* 主体 */
    .work-content__body__banner {
        width: 100%;
    }

    .work-content__body h5 {
        color: #2184d8;
        font-weight: bold;
        font-size: 1.4rem;
    }

    .work-content__body__substance {
        margin-top: 16px;
    }

    .work-content__body__text {
        margin: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .work-content__body__card__box {
        width: 100%;
        /* margin: 0px !important; */
    }

    .work-content__body__card__info {
        margin-top: 20px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .work-content__body__card__warp {
        border-radius: 3px;
        overflow: hidden;
        box-shadow: 0px 0px 4px 2px #e2e2e2;
    }

    .work-content__body__card__title {
        position: absolute;
        bottom: 0px;
        left: 0px;
    }

    .work-content__body__card__title p {
        line-height: 35px;
        text-indent: 1em;
        color: white;
        padding-right: 12px;
        position: relative;
        font-size: .8rem;
        z-index: 2;
    }

    .work-content__body__card__title .back {
        position: relative;
        width: 100%;
    }

    .work-content__body__card__title .shadow {
        position: absolute;
        background: black;
        height: 35px;
        width: 100%;
        opacity: .5;
        z-index: 1;
    }

    .work-content__body__card__message {
        background: white;
        overflow: hidden;
        padding: 20px;
        padding-bottom: 25px;
    }

    .work-content__body__card__message p {
        font-size: .9rem;
        color: #868686;
    }

    .work-content__body {
        height: 100%;
    }

    /* 人物 */
    .work-content__body__detail {
        position: relative;
    }

    .work-content__body__detail .backs {
        width: 100%;
        display: block;
    }

    .work-content__body__title {
        position: absolute;
        padding-top: 8px;
        width: 90%;
        top: 0px;
        left: 5%;
        padding-bottom: 5px;
        border-bottom: 2px solid #dcdcdc;
        overflow: hidden;
    }

    .work-content__body__title .yellow {
        float: left;
        width: 5px;
        height: 20px;
        margin-top: 5px;
        background: yellow;
    }

    .work-content__body__title p {
        float: left;
        line-height: 30px;
        padding-left: 12px;
        color: white;
        font-size: .8rem;
    }

    .work-content__body__center {
        overflow: hidden;
        position: absolute;
        top: 45px;
        width: 100%;
        left: 0px;
    }

    .work-content__body__header {
        float: left;
        width: 40%;
    }

    .work-content__body__header img {
        width: 60%;
        border-radius: 1000px;
        margin-top: 15%;
        margin-left: 20%;
        display: block;
    }

    .work-content__body__message {
        float: left;
        width: 60%;
        margin-top: 7%;
    }

    .work-content__body__message p {
        width: 90%;
        color: white;
        font-size: .79rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* 介绍 */
    .work-content__body__details {
        width: 100%;
        background: #f5f8fd;
        margin-top: 20px;
        box-shadow: 0px 0px 6px 1px #ececec;
        overflow: hidden;
        margin-bottom: 20px;
        ;
    }

    .work-content__body__details .colors {
        background: #8bb3e7;
        float: left;
        width: 3px;
        height: 150px;
    }

    .work-content__body__details img {
        width: 80px;
        margin-top: 35px;
        margin-left: 35px;
        float: left;
    }

    .work-content__body__cop {
        float: left;
        margin-top: 30px;
        margin-left: 35px;
        max-width: 1300px;
        width: 80%;
    }

    .work-content__body__cop h6 {
        font-size: 1.1rem;
    }

    .work-content__body__cop p {
        font-size: .8rem;
    }

    /* 8bb3e7 */
    /* cross */
    .work-content__menu .el-card__body {
        padding: 14px;
    }

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .work-content .el-row,
    .work-content .el-row .work-content__menu,
    .work-content .el-row .work-content__menu .box-card {
        height: 100%;
    }
</style>
<script>
    window.onload = function () {
        $(".work-content").height($(window).height() - 120)
    }
    window.onresize = function () {
        $(".work-content").height($(window).height() - 120)
    }
    new Vue({
        el: "#canvas",
        data: {
            names: "",
            people: {
                where: []
            },
            menus: [{
                icon: "icon-ic_project",
                name: "十强产业",
                href: "./chanye.html"
            }, {
                icon: "icon-tubiaozhuzhuangtu",
                name: "数据查询",
                href: "./shujuchaxun.html"
            }, {
                icon: "icon-shishijiance",
                name: "四新监测",
                href: "./sixinjiance.html"
            }, {
                icon: "icon-fanghu",
                name: "重大项目监测",
                href: "./zhongdianxiangmu.html"
            }, {
                icon: "icon-symmetric",
                name: "对地对标",
                href: "./duididuibiao.html"
            }, {
                icon: "icon-gaosugongluyunyingshujufenxi",
                name: "街道概览",
                href: "./street.html"
            }, {
                icon: "icon-yuanshigongzuozhan",
                name: "工作站概览",
                href: "./work.html"
            }]
        },
        mounted: function () {
            var _this = this
            if (!getQueryVariable("name")) {
                history.go(-1)
            } else {
                _this.names = unescape(getQueryVariable("name"))
                $.ajax({
                    url: "./map/people.json",
                    success: function (req) {
                        _this.people = req.filter(function (s) {
                            return new RegExp(_this.names).test(s.lab)
                        })[0]
                    }
                })
            }
            function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) { return pair[1]; }
                }
                return (false);
            }
        }
    })

</script>

</html>