|
|
@@ -14,14 +14,42 @@
|
|
|
padding-top: 30px !important;
|
|
|
}
|
|
|
|
|
|
+ .top {
|
|
|
+ height: 177px;
|
|
|
+ color: white;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ background-image: url(../images/my.png);
|
|
|
+ background-size: cover;
|
|
|
+ padding-top: 40px;
|
|
|
+ padding-bottom: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mui-content {
|
|
|
+ background-color: #efeff400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cmain {
|
|
|
+ padding: 30px 13px 10px 13px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
.mui-slider {
|
|
|
- margin-top: 15px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ margin-top: -115px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-radius: 7px;
|
|
|
+ height: 155px;
|
|
|
+ background: linear-gradient(to right bottom, #8d99fc, #6172fd 180px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .mui-slider .mui-slider-group .mui-slider-item {
|
|
|
+ margin-right: 1px;
|
|
|
}
|
|
|
|
|
|
.mui-slider .mui-slider-group .mui-slider-item img {
|
|
|
- height: 185px;
|
|
|
+ height: 155px;
|
|
|
width: 100%;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
.banner {
|
|
|
@@ -76,13 +104,13 @@
|
|
|
}
|
|
|
|
|
|
.zpxx-pull-left {
|
|
|
- width: 12%;
|
|
|
+ width: 13%;
|
|
|
float: left;
|
|
|
- color: #f03e38;
|
|
|
+ color: #ff8d84;
|
|
|
}
|
|
|
|
|
|
.zpxx-pull-center {
|
|
|
- width: 80%;
|
|
|
+ width: 78%;
|
|
|
float: left;
|
|
|
color: #f03e38;
|
|
|
}
|
|
|
@@ -165,7 +193,7 @@
|
|
|
}
|
|
|
|
|
|
.ckk {
|
|
|
- background-color: #2196F3;
|
|
|
+ background: linear-gradient(to right bottom, #8d99fc, #6172fd 70px);
|
|
|
border-radius: 20px;
|
|
|
padding: 3px 15px;
|
|
|
color: white;
|
|
|
@@ -191,185 +219,198 @@
|
|
|
|
|
|
.sousuo {
|
|
|
color: white !important;
|
|
|
- margin: 15px 10px 10px 8px !important;
|
|
|
+ position: absolute;
|
|
|
+ left: 22px !important;
|
|
|
+ top: -7px !important;
|
|
|
}
|
|
|
|
|
|
input::-webkit-input-placeholder {
|
|
|
/* WebKit browsers，webkit内核浏览器 */
|
|
|
color: white;
|
|
|
font-size: 13px;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-group {
|
|
|
+ padding: 0px 20px 0px 20px !important;
|
|
|
+ border-radius: 30px !important;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
.input-group input {
|
|
|
+ width: 85%;
|
|
|
padding: 13px 11px 11px 35px;
|
|
|
- height: 35px !important;
|
|
|
+ border-radius: 30px;
|
|
|
+ margin-left: -61px;
|
|
|
}
|
|
|
|
|
|
- [v-cloak] {
|
|
|
- display: none;
|
|
|
+ .tz {
|
|
|
+ position: absolute;
|
|
|
+ right: 6px !important;
|
|
|
+ top: 5px;
|
|
|
+ color: white;
|
|
|
+ font-size: 22px;
|
|
|
}
|
|
|
|
|
|
- .marsk {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: white;
|
|
|
- top: 0%;
|
|
|
- z-index: 11;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
- .ks{
|
|
|
- font-size: 28px;
|
|
|
- font-weight: bold;
|
|
|
- margin-top: 20%;
|
|
|
+ .model {
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
- .items{
|
|
|
- padding: 20px;
|
|
|
- border: 1px solid #cbcbcb;
|
|
|
+
|
|
|
+ .bbc {
|
|
|
border-radius: 5px;
|
|
|
- margin-top: 20px;
|
|
|
+ margin-top: -8px;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
- .zw{
|
|
|
- font-weight: bold;
|
|
|
- font-size: 18px;
|
|
|
+
|
|
|
+ [v-cloak] {
|
|
|
+ display: none;
|
|
|
}
|
|
|
- .zc{
|
|
|
- color: #818181;
|
|
|
- font-size: 13px;
|
|
|
- margin-top: 5px;
|
|
|
+
|
|
|
+ .mui-table-view:after {
|
|
|
+ background-color: #e6e6e6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tj {
|
|
|
+ float: left;
|
|
|
+ width: 5px;
|
|
|
+ height: 15px;
|
|
|
+ margin-top: 2.5px;
|
|
|
+ margin-right: 5px;
|
|
|
+ background-color: #2567ff;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="app" v-cloak>
|
|
|
- <header class="mui-bar mui-bar-nav">
|
|
|
+ <div class="top">
|
|
|
<form class="input-group" v-on:submit.prevent="search()">
|
|
|
- <i class="icon sousuo"></i>
|
|
|
+ <i class="icon sousuo"></i>
|
|
|
<input type="search" placeholder="搜索你感兴趣的工作" v-model="param.name" />
|
|
|
+ <span class="icon tz" @click="page('message_list','../pages/message/list.html')"></span>
|
|
|
</form>
|
|
|
- </header>
|
|
|
- <div class="marsk" v-show="xs">
|
|
|
- <div class="ks">让我们开始吧</div>
|
|
|
- <div class="items" style="margin-top: 40px;">
|
|
|
- <div class="zw">发布职位</div>
|
|
|
- <div class="zc">告诉我们您需要做什么。</div>
|
|
|
- </div>
|
|
|
- <div class="items">
|
|
|
- <div class="zw">浏览兼职赚钱信息</div>
|
|
|
- <div class="zc">找到满足您需求的完美自由的兼职。</div>
|
|
|
- </div>
|
|
|
- <div class="items">
|
|
|
- <div class="zw">探索展示</div>
|
|
|
- <div class="zc">查看我们自由职业者，并雇用您喜欢的人。</div>
|
|
|
- </div>
|
|
|
- <button class="btn" @click="xs=false" style="padding: 20px;border-radius: 5px;margin-top: 40px;">开始</button>
|
|
|
</div>
|
|
|
- <div class="mui-content animated fadeInDown">
|
|
|
- <!--图片轮播-->
|
|
|
- <div id="slider" class="mui-slider">
|
|
|
- <div class="mui-slider-group mui-slider-loop">
|
|
|
- <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
|
|
|
- <div class="mui-slider-item mui-slider-item-duplicate">
|
|
|
- <a v-for="(item,index) in banner_list" v-if="index==banner_list.length-1">
|
|
|
- <img :src="path+item.cover">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="mui-slider-item" v-for="(item,index) in banner_list"
|
|
|
- @click="news_detail(item.url_id)">
|
|
|
- <a><img :src="path+item.cover">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
|
|
|
- <div class="mui-slider-item mui-slider-item-duplicate">
|
|
|
- <a v-for="(item,index) in banner_list" v-if="index==0">
|
|
|
- <img :src="path+item.cover">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mui-slider-indicator mui-text-right">
|
|
|
- <div class="mui-indicator" v-for="(item,index) in banner_list"
|
|
|
- :class="index==0?'mui-active':'' "></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--图片轮播end-->
|
|
|
- <div class="main">
|
|
|
- <!--招聘信息-->
|
|
|
- <div class="menu row" style="padding:0px 0px 0px 0px;margin-top: -8px;">
|
|
|
- <ul class="mui-table-view">
|
|
|
- <li class="mui-table-view-cell mui-media">
|
|
|
- <a href="javascript:;">
|
|
|
-
|
|
|
- <div class="zpxx-pull-left" style="padding-right: 13px;font-weight: bold;">
|
|
|
- <div>招聘</div>
|
|
|
- <div>信息</div>
|
|
|
- </div>
|
|
|
- <div class="zpxx-pull-center">
|
|
|
- <p class="sm8 omit" style="font-size: 13px!important;">
|
|
|
- 2022年全区十八大与南宁召开广西大力推广招聘兼职的在线</p>
|
|
|
- <p class="sm8 omit" style="font-size: 13px!important;">
|
|
|
- 广西大力推广招聘兼职的在线广西大力推广招聘兼职的在线广西大力推广招聘兼职的在线</p>
|
|
|
- </div>
|
|
|
- <div class="zpxx-pull-right" style="padding-top: 10px;">
|
|
|
- <div><i class="icon i" style="color: #7a7a7a;"></i></div>
|
|
|
- </div>
|
|
|
+ <div class="cmain">
|
|
|
+ <div class="mui-content">
|
|
|
+ <!--图片轮播-->
|
|
|
+ <div id="slider" class="mui-slider">
|
|
|
+ <div class="mui-slider-group mui-slider-loop">
|
|
|
+ <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
|
|
|
+ <div class="mui-slider-item mui-slider-item-duplicate">
|
|
|
+ <a v-for="(item,index) in banner_list" v-if="index==banner_list.length-1">
|
|
|
+ <img :src="path+item.cover">
|
|
|
</a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <!--招聘信息end-->
|
|
|
-
|
|
|
- <!--兼职信息-->
|
|
|
- <div class="mains">
|
|
|
- <div class="msn" @click="skip(1)">
|
|
|
- <div class="ioc" style="background-color: #2196F3;"><i class="icon icons"></i></div>
|
|
|
- <div class="tit">小时工</div>
|
|
|
+ </div>
|
|
|
+ <div class="mui-slider-item" v-for="(item,index) in banner_list"
|
|
|
+ @click="news_detail(item.url_id)">
|
|
|
+ <a><img :src="path+item.cover">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
|
|
|
+ <div class="mui-slider-item mui-slider-item-duplicate">
|
|
|
+ <a v-for="(item,index) in banner_list" v-if="index==0">
|
|
|
+ <img :src="path+item.cover">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="msn" @click="skip(2)">
|
|
|
- <div class="ioc" style="background-color: #F44336;"><i class="icon icons"></i></div>
|
|
|
- <div class="tit">日工</div>
|
|
|
+ <div class="mui-slider-indicator mui-text-right">
|
|
|
+ <div class="mui-indicator" v-for="(item,index) in banner_list"
|
|
|
+ :class="index==0?'mui-active':'' "></div>
|
|
|
</div>
|
|
|
- <div class="msn" @click="skip(3)">
|
|
|
- <div class="ioc" style="background-color: #607D8B;"><i class="icon icons"></i></div>
|
|
|
- <div class="tit">兼职任务</div>
|
|
|
+ </div>
|
|
|
+ <!--图片轮播end-->
|
|
|
+
|
|
|
+ <div class="bbc">
|
|
|
+ <!--招聘信息-->
|
|
|
+ <div class="menu row" style="padding:0px 0px 0px 0px;">
|
|
|
+ <ul class="mui-table-view" @click="more('政策宣传')">
|
|
|
+ <li class="mui-table-view-cell mui-media">
|
|
|
+ <a href="javascript:;">
|
|
|
+
|
|
|
+ <div class="zpxx-pull-left" style="padding-right: 13px;font-weight: bold;">
|
|
|
+ <div>招聘</div>
|
|
|
+ <div>信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="zpxx-pull-center">
|
|
|
+ <p class="sm8 omit" style="font-size: 13px!important;">
|
|
|
+ 2022年全区十八大与南宁召开广西大力推广招聘兼职的在线</p>
|
|
|
+ <p class="sm8 omit" style="font-size: 13px!important;">
|
|
|
+ 广西大力推广招聘兼职的在线广西大力推广招聘兼职的在线广西大力推广招聘兼职的在线</p>
|
|
|
+ </div>
|
|
|
+ <div class="zpxx-pull-right" style="padding-top: 10px;">
|
|
|
+ <div><i class="icon i" style="color: #7a7a7a;"></i></div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- <div class="msn" @click="skip(4)">
|
|
|
- <div class="ioc" style="background-color: #795548;"><i class="icon icons"></i></div>
|
|
|
- <div class="tit">长期工</div>
|
|
|
+ <!--招聘信息end-->
|
|
|
+
|
|
|
+ <!--兼职信息-->
|
|
|
+ <div class="mains">
|
|
|
+ <div class="msn" @click="skip(1)">
|
|
|
+ <div class="ioc"
|
|
|
+ style="background: linear-gradient(to right bottom, #ec7e6d, #f94b47 70px);"><i
|
|
|
+ class="icon icons"></i>
|
|
|
+ </div>
|
|
|
+ <div class="tit">小时工</div>
|
|
|
+ </div>
|
|
|
+ <div class="msn" @click="skip(2)">
|
|
|
+ <div class="ioc"
|
|
|
+ style="background: linear-gradient(to right bottom, #8d99fc, #6172fd 70px);"><i
|
|
|
+ class="icon icons"></i>
|
|
|
+ </div>
|
|
|
+ <div class="tit">日工</div>
|
|
|
+ </div>
|
|
|
+ <div class="msn" @click="skip(3)">
|
|
|
+ <div class="ioc"
|
|
|
+ style="background: linear-gradient(to right bottom, #fcac50, #f6750b 70px);"><i
|
|
|
+ class="icon icons"></i>
|
|
|
+ </div>
|
|
|
+ <div class="tit">任务</div>
|
|
|
+ </div>
|
|
|
+ <div class="msn" @click="skip(4)">
|
|
|
+ <div class="ioc"
|
|
|
+ style="background: linear-gradient(to right bottom, #67dca9, #45bd88 70px);"><i
|
|
|
+ class="icon icons"></i>
|
|
|
+ </div>
|
|
|
+ <div class="tit">长期工</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!--兼职信息end-->
|
|
|
</div>
|
|
|
- <!--兼职信息end-->
|
|
|
|
|
|
<!--推荐企业-->
|
|
|
<div class="model">
|
|
|
- <div class="bod">
|
|
|
- <span class="text"><i class="icon"></i>推荐企业</span>
|
|
|
+ <div class="bod" style="border: 0px;padding-bottom: 0px;">
|
|
|
+ <span class="text"><i class="tj"></i>推荐企业</span>
|
|
|
<span class="mores" @click="more('时政信息')">更多</span>
|
|
|
</div>
|
|
|
<div class="flex">
|
|
|
<div class="f">
|
|
|
<img src="../images/u83.png" class="vimg" />
|
|
|
- <div class="cvt omit">华为公司技术有限公司</div>
|
|
|
+ <div class="cvt omit">华为公司</div>
|
|
|
<div class="nums">122个兼职</div>
|
|
|
<div class="ckk">查看</div>
|
|
|
</div>
|
|
|
<div class="f">
|
|
|
- <img src="../images/256x256.png" class="vimg" />
|
|
|
- <div class="cvt omit">汇金雨公司</div>
|
|
|
- <div class="nums">3个兼职</div>
|
|
|
+ <img src="../images/bc.png" class="vimg" />
|
|
|
+ <div class="cvt omit">苹果公司</div>
|
|
|
+ <div class="nums">7个兼职</div>
|
|
|
<div class="ckk">查看</div>
|
|
|
</div>
|
|
|
<div class="f">
|
|
|
- <img src="../images/ls.png" class="vimg" />
|
|
|
- <div class="cvt omit">基栋科技公司</div>
|
|
|
- <div class="nums">1个兼职</div>
|
|
|
+ <img src="../images/aa.jpg" class="vimg" />
|
|
|
+ <div class="cvt omit">美团</div>
|
|
|
+ <div class="nums">11个兼职</div>
|
|
|
<div class="ckk">查看</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--推荐企业end-->
|
|
|
<div class="model">
|
|
|
- <div class="bod">
|
|
|
- <span class="text"><i class="icon" style="color: red;"></i>文章公告</span>
|
|
|
+ <div class="bod" style="border: 0px;padding-bottom: 0px;">
|
|
|
+ <span class="text"><i class="tj"></i>文章公告</span>
|
|
|
<span class="mores" @click="more('政策宣传')">更多</span>
|
|
|
</div>
|
|
|
<div class="item row lvs" v-for="(item,index) in new_list2" @click="detail(item.id)">
|
|
|
@@ -377,10 +418,6 @@
|
|
|
{{item.mTitle}}
|
|
|
</div>
|
|
|
<div class="mttime">{{item.mTime.substring(5,11)}}</div>
|
|
|
- <!--<div class="sm4">
|
|
|
- <img src="../images/u83.png">
|
|
|
- </div>-->
|
|
|
-
|
|
|
<div class="clear"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -400,7 +437,7 @@
|
|
|
var vm = new Vue({
|
|
|
el: "#app",
|
|
|
data: {
|
|
|
- xs:true,
|
|
|
+ xs: false,
|
|
|
banner_list: [],
|
|
|
new_list1: [],
|
|
|
new_list2: [],
|
|
|
@@ -408,14 +445,14 @@
|
|
|
param: {}
|
|
|
},
|
|
|
mounted: function() {
|
|
|
- mui.plusReady(function() {
|
|
|
+ setTimeout(function() {
|
|
|
request(urls().main, null, function(res) {
|
|
|
vm.banner_list = res.banner_list;
|
|
|
vm.new_list1 = res.new_list1;
|
|
|
vm.new_list2 = res.new_list2;
|
|
|
plus.nativeUI.closeWaiting();
|
|
|
})
|
|
|
- })
|
|
|
+ }, 500)
|
|
|
},
|
|
|
methods: {
|
|
|
more: function(type) {
|
|
|
@@ -429,6 +466,15 @@
|
|
|
id: id
|
|
|
}, 'slide-in-bottom');
|
|
|
},
|
|
|
+ //页面跳转操作(需要登录)
|
|
|
+ page: function(id, url) {
|
|
|
+ if (!hasLogin()) {
|
|
|
+ mui.toast("请先登录")
|
|
|
+ open('login', '../pages/user/login.html', null, 'slide-in-bottom');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ open(id, url, null, 'slide-in-bottom');
|
|
|
+ },
|
|
|
//兼职招聘
|
|
|
skip: function(type) {
|
|
|
if (type == 1 || type == 2 || type == 3) {
|
李书文
