作者 xuqiang

提交

<template>
<view class="imgTxtTitle">
<image :src="imgUrl" mode=""></image>
{{txtInfo}}
</view>
</template>
<script>
export default{
props:{
imgUrl:{
type:String
},
txtInfo:{
type:String
}
}
}
</script>
<style lang="scss" scoped>
.imgTxtTitle{
height: 108rpx;
display: flex;
align-items: center;
image{width: $uni-img-size-44;height: $uni-img-size-44;margin-right: 16rpx;}
font-size: $uni-font-size-40;
}
</style>
... ...
... ... @@ -9,6 +9,26 @@ App.mpType = 'app'
import uView from 'uview-ui';
Vue.use(uView);
Vue.prototype.$href=function(data,type=1){
// if(uni.getStorageSync("token")){
if(type==1){
uni.navigateTo({
url:data
})
}
if(type==2){
uni.switchTab({
url:data
})
}
/* }else{
uni.navigateTo({
url:"/pages/login/login?backurl="+data
})
} */
}
const app = new Vue({
...App
})
... ...
... ... @@ -10,12 +10,26 @@
"navigationBarBackgroundColor":"#2e7ff9",
"navigationBarTextStyle":"white"
}
},
{
"path": "pages/index/replyDesc",
"style": {
"navigationBarTitleText": "市场监管",
"navigationBarBackgroundColor":"#2e7ff9",
"navigationBarTextStyle":"white"
}
},
{
"path": "pages/index/infoKnow",
"style": {
"navigationBarTitleText": "资料须知"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#F8F8F8"
}
}
... ...
<template>
<view class="content">
<view>
<!-- 轮播图区域 -->
<view class="swiperBgWrap">
<u-swiper @change="change" :height="250" :list="list" :title="title" :effect3d="effect3d"
<u-swiper @change="change" :height="326" :list="list" :title="title" :effect3d="effect3d"
:indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="click"></u-swiper>
</view>
<!-- 单位简介区域 -->
<view class="unitDescWrap">
<img-txt-title :imgUrl="'../static/image/index/ic_87@2x.png'" :txtInfo="'单位简介'"></img-txt-title>
<view class="unitDesc">
中国冶金地质总局成立于1952年,隶属国务院国有资产监督管理委员会,是中央管理的地质勘查单位,肩负着提高资源保障能力的公益性央企,主要从事固体矿产地质勘查、研究、开发、服务,超硬材料生产及机械装备制造。资产总额230多亿元。 中国冶金地质下属11个局院(中心)、6个控股公司,队伍驻地分布在全国20个省、自治区和直辖市。   宗旨和业务范围:为国家冶金地质工作提供管理保障;固体矿产地质勘查、研究、开发、服务;超硬材料生产及机械设备研制;冶金地质勘查发展规划和规章制度制定;冶金地质行业标准研究;冶金地质勘查业务管理;相关地质勘查组织实施;所属地质单位队伍管理;国外重要地质矿产勘查;找矿理论和勘查技术等相关研究,提供技术服务
</view>
<view class="companyVideo">
<video
id="myVideo"
src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
controls
></video>
</view>
</view>
<!-- 单位案例区域 -->
<view class="unitCaseWrap">
<img-txt-title :imgUrl="'../static/image/index/ic_88@2x.png'" :txtInfo="'单位案例'"></img-txt-title>
<view class="unitCase">
<view class="caseItem">
<image src="../../static/image/del/ic_90@2x.png" mode="aspectFill"></image>
<view class="companyName">
杭州传媒有限公司
</view>
</view>
<view class="caseItem">
<image src="../../static/image/del/ic_90@2x.png" mode="aspectFill"></image>
<view class="companyName">
杭州传媒有限公司杭州传媒有限公司
</view>
</view>
<view class="caseItem">
<image src="../../static/image/del/ic_90@2x.png" mode="aspectFill"></image>
<view class="companyName">
杭州传媒有限公司
</view>
</view>
<view class="caseItem">
<image src="../../static/image/del/ic_90@2x.png" mode="aspectFill"></image>
<view class="companyName">
杭州传媒有限公司
</view>
</view>
</view>
</view>
<!-- 底部按钮区域 -->
<view class="bottomBtnWrap">
<view class="companyReplyBtn" @click="$href('replyDesc')">
企业入驻
</view>
<view class="loginBtnList">
<view class="loginBtnItem company">
<image src="../../static/image/index/ic_91@2x.png" mode=""></image>
企业登录
</view>
<view class="loginBtnItem complat">
<image src="../../static/image/index/ic_92@2x.png" mode=""></image>
平台员工登录
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import imgTxtTitle from '@/components/imgTxtTitle.vue'
export default {
data() {
return {
... ... @@ -34,11 +94,16 @@
effect3d: false,
}
},
components:{
imgTxtTitle
},
onLoad() {
},
methods: {
change(index) {
// console.log(index);
}
}
}
</script>
... ... @@ -46,10 +111,90 @@
<style lang="scss" scoped>
// 轮播图背景区域
.swiperBgWrap{
height: 220rpx;
background: linear-gradient(180deg,$uni-bg-main-color, $uni-bg-bai-color);
height: 352rpx;
background: linear-gradient(180deg,$uni-bg-main-color, $uni-bg-bai-color, $uni-bg-bai-color);
padding: 20rpx 32rpx 0 32rpx;
}
// 单位简介区域
.unitDescWrap{
margin: 20rpx 32rpx 0 32rpx;
background: #ffffff;
border-radius: 20rpx;
box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(97,97,97,0.05);
.unitDesc{
padding: 0 24rpx;
font-size: $uni-font-size-28;
color: $uni-text-color-hui;
line-height: $uni-font-lh-40;
}
.companyVideo{
padding: 32rpx;
video{
width: 100%;
border-radius: $uni-border-radius-20;
height: 300rpx;
}
}
}
// 单位案例区域
.unitCaseWrap{
padding: 20rpx 30rpx 0 30rpx;
.unitCase{
display: flex;
flex-wrap: wrap;
.caseItem{
margin-right: 20rpx;
margin-top: 10rpx;
image{width: 216rpx;height: 136rpx;}
.companyName{
width: 216rpx;
font-size: $uni-font-size-24;
font-weight: 600;
line-height: $uni-font-lh-40;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
}
}
.caseItem:nth-of-type(3n){margin-right: 0;}
}
}
// 底部按钮区域
.bottomBtnWrap{
padding: 100rpx 60rpx 66rpx 60rpx;
.companyReplyBtn{
height: 80rpx;
border: 2rpx solid #969799;
border-radius: 82rpx;
line-height: 40rpx;
font-size: $uni-font-size-32;
line-height: 80rpx;
text-align: center;
}
.loginBtnList{
padding-top: 44rpx;
display: flex;
.loginBtnItem{
height: 80rpx;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
image{width: $uni-img-size-32;height: $uni-img-size-32;margin-right: 12rpx;}
color: $uni-text-color-bai;
font-size: $uni-font-size-32;
}
.loginBtnItem.company{
background: $uni-bg-main-color;
border-radius: $uni-border-radius-80 0rpx 0rpx $uni-border-radius-80;
}
.loginBtnItem.complat{
background: $uni-bg-color-lv;
border-radius: 0rpx $uni-border-radius-80 $uni-border-radius-80 0;
}
}
}
</style>
... ...
<template>
<view>
<view class="infoKnow">
第一章 入驻 1.1 平台开放平台暂未授权任何机构进行代理招商服务,入驻申请流程及相关的收费说明均以平台开放平台官方招商页面为准。 1.2 平台开放平台有权根据包括但不限于品牌需求、公司经营状况、服务水平等其他因素退回卖家申请。 1.3 平台开放平台有权在申请入驻及后续经营阶段要求卖家提供其他资质。 1.4 平台开放平台将结合各行业发展动态、国家相关规定及消费者购买需求,不定期更新招商标准。 1.5 卖家必须如实提供资料和信息: 1.5.1 请务必确保申请入驻及后续经营阶段提供的相关资质和信息的真实性、完整性、有效性(若卖家提供的相关资质为第三方提供,包括但不限于商标注册证、授权书 等,请务必先行核实文件的真实有效完整性),一旦发现虚假资质或信息的,平台开放平台将不再与卖家进行合作并有权根据平台开放平台规则及与卖家签署的相关 协议之约定进行处理。
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.infoKnow{
border-top: 1rpx solid #f2f2f2;
padding: 32rpx;
font-size: $uni-font-size-30;
line-height: $uni-font-lh-48;
color: $uni-text-color-hui;
}
</style>
... ...
<template>
<view>
<view class="bgWrap">
<view class="replyDesc">
<view class="title">
企业入驻
</view>
<view class="subTitle">
入驻简介
</view>
<view class="replySmDesc">
目前,飞凡积分联盟很有规模了,跟金融、航空、通讯、互联网、商旅领域中排名前列的多家知名企业建立了战略合作关系,已有6900多家商户签约联盟。 单单是现阶段,这个联盟所覆盖的会员数量已经达到亿级,联盟合作伙伴整体积分存量达到百亿级园区第二届纳米专项科技领军人才黄克宙创业(成长型)项目,注册资金5108万元,拥有独特的“电化学纳米高纯铝粉制备工艺”和“纳米材料分散体系”技术。 专业从事高纯纳米氧化铝材料的研发和中试,产品可作为高端蓝宝石衬底专用原料用于LED等领域。 在苏州纳米城定建8000平方米的研发、中试和总部大楼。
</view>
<view class="stageList">
<u-time-line>
<u-time-line-item>
<template v-slot:content>
<view>
<view class="stageName">阶段一:入驻前准备</view>
<view class="stageDesc">
(1)点击查询入驻所需资质和费用。 (2)准备的资料请加盖开店公司公章(鲜章)。 (3)如申请材料缺少,会退回给您重新提交,建议您事先准备齐全资料,一次性通过审核。
</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item>
<template v-slot:content>
<view>
<view class="stageName">阶段二:入驻申请</view>
<view class="stageDesc">
(1)确认入驻协议、查看入驻须知。 (2)录入开店联系人的信息,便于在入驻过程中遇到任何问题,我 可以第一时间联系到您。 (3)填写公司信息,包含营业执照、组织机构代码和经营信息。
</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item>
<template v-slot:content>
<view>
<view class="stageName">阶段三:申请</view>
<view class="stageDesc">
(1)资质真实有效。 (2)规模达到入驻要求。 (3)授权有效,链路完整。 (4)生产、经营范围、产品安全性 资质完整 符合国家行政法 规许可要求。 (5)审核周期:7个工作日。
</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item>
<template v-slot:content>
<view>
<view class="stageName">阶段四:申请完成</view>
<view class="stageDesc">
(1)资质真实有效。 (2)规模达到入驻要求。 (3)授权有效,链路完整。 (4)生产、经营范围、产品安全性 资质完整 符合国家行政法 规许可要求。 (5)审核周期:7个工作日。
</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
</view>
<view class="infoKnowWrap">
<view @click="$href('infoKnow')" class="infoKnowBtn">
资料须知
</view>
</view>
<view class="subTitle">
入驻说明
</view>
<view class="replyIllusWrap">
<view class="replyIllus">
1. 资金要求:公司注册资金30万及30万以上人民币,且注册时间壹年以上。 2. 缴纳费用:平台使用费暂定1200元/年,首年免;保证金暂定20000元,首年2000元。 3. 授权资质:需要确保授权链条的完整,即申请入驻企业拿到的授权能够逐级逆推回品牌商。 4. 提供发票:所有入驻的企业必须给消费者提供正规发票,发票盖章的公司名称必须与商家与定吧合作的公司名称一致。 5. 申请类型:定吧商城暂不接受未取得国家商标总局颁发的商标注册证或商标受理通知书的境外品牌的开店申请。
</view>
<view class="replyBtnWrap">
<view class="replyBtn" @click="showFailReason = true">
<!-- 条件判断显示:审核中、重新注册 -->
入驻申请
</view>
</view>
</view>
</view>
</view>
<!-- 条件判断显示弹框 -->
<view class="alertWrap" v-if="showFailReason">
<view class="alert">
<view class="closeBtn">
<image @click="showFailReason = false" src="../../static/image/ic_94@2x.png" mode=""></image>
</view>
<view class="alertTitle">
失败原因
</view>
<view class="alertContent">
带着这些问题,我们来审视一下失败。 我们不得不面对一个非常尴尬的事实,那就是, 问题的关键究竟为何?
</view>
<view class="bottomBtnWrap">
<view class="bottomBtn">
确定
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
showFailReason:false
}
}
}
</script>
<style lang="scss">
page{
background-color: $uni-bg-color-hui;
}
.bgWrap{
height: 174rpx;
background: $uni-bg-main-color;
padding: 30rpx 32rpx 0 30rpx;
.replyDesc{
background: #ffffff;
border-radius: 24rpx;
padding: 0 32rpx 40rpx 32rpx;
margin-bottom: 50rpx;
.title{
height: 120rpx;
border-bottom: 1rpx solid #ebedf0;
font-size: $uni-font-size-40;
font-weight: 600;
line-height: 120rpx;
color: $uni-bg-main-color;
}
.subTitle{
height: 99rpx;
font-size: $uni-font-size-36;
line-height: 99rpx;
}
.replySmDesc{
font-size: $uni-font-size-26;
line-height: $uni-font-lh-40;
color: $uni-text-color-hui;
}
.stageList{
padding-top: 28rpx;
.stageName{
font-size: $uni-font-size-30;
}
.stageDesc{
font-size: $uni-font-size-24;
color: $uni-text-color-hui;
line-height: $uni-font-lh-32;
margin-top: 24rpx;
padding: 24rpx;
background: #f7f8fa;
border-radius: 26rpx;
}
}
.infoKnowWrap{
display: flex;
justify-content: flex-end;
.infoKnowBtn{
width: 150rpx;
height: 40rpx;
background: #2e7ff9;
border-radius: 70rpx;
font-size: $uni-font-size-26;
line-height: $uni-font-lh-40;
text-align: center;
color: $uni-text-color-bai;
}
}
.replyIllusWrap{
background: #f7f8fa;
border-radius: 24rpx;
padding: 24rpx;
.replyIllus{
font-size: $uni-font-size-24;
color: $uni-text-color-hui;
line-height: $uni-font-lh-32;
}
.replyBtnWrap{
padding: 48rpx 24rpx 0 24rpx;
.replyBtn{
height: 60rpx;
background: #2e7ff9;
border-radius: 64rpx;
text-align: center;
line-height: 60rpx;
color: $uni-text-color-bai;
font-size: $uni-font-size-32;
}
}
}
}
}
.alertWrap{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: $uni-bg-color-mask;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
.alert{
width: 638rpx;
background: #ffffff;
border-radius: 44rpx;
padding: 32rpx;
.closeBtn{
display: flex;
justify-content: flex-end;
image{width: $uni-img-size-40;height: $uni-img-size-40;}
}
.alertTitle{
font-size: $uni-font-size-40;
text-align: center;
height: 90rpx;
line-height: 90rpx;
font-weight: 600;
}
.alertContent{
padding-top: 38rpx;
font-size: $uni-font-size-26;
line-height: $uni-font-lh-40;
color: $uni-text-color-hui;
}
.bottomBtnWrap{
padding-top: 38rpx;
display: flex;
justify-content: center;
.bottomBtn{
width: 254rpx;
height: 84rpx;
background: #2e7ff9;
border-radius: 68rpx;
font-size: $uni-font-size-32;
color: $uni-text-color-bai;
line-height: 84rpx;
text-align: center;
}
}
}
}
</style>
... ...
... ... @@ -22,17 +22,17 @@ $uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
$uni-text-color-bai:#fff;//反色
$uni-text-color-hui:#646566;//辅助灰色,如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-main-color:#2e7ff9;
$uni-bg-bai-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
$uni-bg-color-lv:#42a4ab;
$uni-bg-color-hui:#f7f8fa;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.5);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
... ... @@ -40,18 +40,27 @@ $uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;
$uni-font-size-40:40rpx;
$uni-font-size-28:28rpx;
$uni-font-size-24:24rpx;
$uni-font-size-32:32rpx;
$uni-font-size-36:36rpx;
$uni-font-size-26:26rpx;
$uni-font-size-30:30rpx;
/* 文字行高 */
$uni-font-lh-40:40rpx;
$uni-font-lh-32:32rpx;
$uni-font-lh-48:48rpx;
/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;
$uni-img-size-44:44rpx;
$uni-img-size-32:32rpx;
$uni-img-size-40:40rpx;
/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-80: 80rpx;
$uni-border-radius-20: 20rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;
... ...
... ... @@ -75,9 +75,9 @@
}
.u-dot {
height: 16rpx;
width: 16rpx;
height: 24rpx;
width: 24rpx;
border-radius: 100rpx;
background: #ddd;
background: #2e7ff9;
}
</style>
... ...