|
@@ -0,0 +1,329 @@
|
|
|
+<style lang='less' scoped>
|
|
|
+page {
|
|
|
+ height: 100%;
|
|
|
+ background: #ebf5fa;
|
|
|
+}
|
|
|
+.operating {
|
|
|
+ width: 654rpx;
|
|
|
+ padding-top: 244rpx;
|
|
|
+ padding-left: 56rpx;
|
|
|
+ padding-right: 56rpx;
|
|
|
+ padding-bottom: 66rpx;
|
|
|
+ height: 600rpx;
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ rgba(61, 203, 204, 0.2) 0%,
|
|
|
+ rgba(61, 203, 204, 0) 100.34%
|
|
|
+ );
|
|
|
+ .title {
|
|
|
+ padding-bottom: 72rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 68rpx;
|
|
|
+ color: rgba(27, 33, 41, 1);
|
|
|
+ }
|
|
|
+ .each-box {
|
|
|
+ .img-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 360rpx;
|
|
|
+ margin-bottom: 64rpx;
|
|
|
+ }
|
|
|
+ .each-title {
|
|
|
+ margin-bottom: 64rpx;
|
|
|
+ height: 208rpx;
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ rgba(61, 203, 204, 0.3) 0%,
|
|
|
+ rgba(61, 203, 204, 0) 100%
|
|
|
+ );
|
|
|
+ border-left: 3px solid #3dcbcc;
|
|
|
+ padding-left: 32rpx;
|
|
|
+ padding-top: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .big-id {
|
|
|
+ font-family: Persagy2.0;
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 64rpx;
|
|
|
+ color: #1b2129;
|
|
|
+ }
|
|
|
+ .big-title {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #1b2129;
|
|
|
+ }
|
|
|
+ .titletop {
|
|
|
+ margin-bottom: 64rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #1b2129;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .each-child {
|
|
|
+ .child-title {
|
|
|
+ margin-top: 64rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 56rpx;
|
|
|
+ color: #1b2129;
|
|
|
+ }
|
|
|
+ .child-text {
|
|
|
+ margin-bottom: 64rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 56rpx;
|
|
|
+ color: #626c78;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ height: 460rpx;
|
|
|
+ padding: 48rpx 40rpx 48rpx 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ background: rgba(61, 203, 204, 0.2);
|
|
|
+ .info-title {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 48rpx;
|
|
|
+ color: rgba(27, 33, 41, 1);
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ margin-top: 48rpx;
|
|
|
+ margin-bottom: 48rpx;
|
|
|
+ }
|
|
|
+ .info-text {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: rgba(98, 108, 120, 1);
|
|
|
+ .highlight {
|
|
|
+ color: #1db1b2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pop {
|
|
|
+ .up-box {
|
|
|
+ text-align: center;
|
|
|
+ height: 100rpx;
|
|
|
+ padding: 13px 16px 13px 16px;
|
|
|
+ border-bottom: 16rpx solid #f1f4f6;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 100rpx;
|
|
|
+ color: #1db1b2;
|
|
|
+ }
|
|
|
+ .down-box {
|
|
|
+ text-align: center;
|
|
|
+ height: 180rpx;
|
|
|
+ padding-bottom: 80rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 100rpx;
|
|
|
+ color: #8b949e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<!-- 操作指引 -->
|
|
|
+<template>
|
|
|
+ <page-top-bar icon="{{h5Static+'/page-top-bar/return-icon.svg'}}"></page-top-bar>
|
|
|
+ <div class="operating">
|
|
|
+ <div class="title">关心环境,更关心你</div>
|
|
|
+ <div
|
|
|
+ class="each-box"
|
|
|
+ v-for="item in arr"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ class="img-box"
|
|
|
+ src="{{h5StaticPath }}/{{item.img}}"
|
|
|
+ />
|
|
|
+ <div class="each-title">
|
|
|
+ <div class="big-id">{{item.id}}</div>
|
|
|
+ <div class="big-title">{{item.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="item.titletop"
|
|
|
+ class="titletop"
|
|
|
+ >{{ item.titletop }}</div>
|
|
|
+ <div
|
|
|
+ v-for="child in item.content"
|
|
|
+ :key="child.title"
|
|
|
+ class="each-child"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="child-title"
|
|
|
+ v-if="child.title"
|
|
|
+ >{{ child.title }}</div>
|
|
|
+ <div class="child-text">{{ child.text }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 视频 -->
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="info-title">
|
|
|
+ SagaCare – Care about you
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="info-text">更多智慧办公解决方案请详询:</div>
|
|
|
+ <div
|
|
|
+ class="info-text"
|
|
|
+ @click="openPop(true)"
|
|
|
+ >电话: <span class="highlight">{{ phoneNum }}</span></div>
|
|
|
+ <div class="info-text">邮箱:{{ mailbox }} <span
|
|
|
+ class="highlight"
|
|
|
+ @click="handleCopy"
|
|
|
+ >复制</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="info-text">各版块解决方案内容均包含硬件实施、软件配置、定制化咨询服务</div>
|
|
|
+ </div>
|
|
|
+ <van-popup
|
|
|
+ custom-style="height: 20%"
|
|
|
+ round
|
|
|
+ :show="visibale"
|
|
|
+ position="bottom"
|
|
|
+ @close="visibale = false"
|
|
|
+ >
|
|
|
+ <div class="pop">
|
|
|
+ <div
|
|
|
+ class="up-box"
|
|
|
+ @click="handleCall"
|
|
|
+ >呼叫 {{ phoneNum }}</div>
|
|
|
+ <div
|
|
|
+ class="down-box"
|
|
|
+ @click="openPop(false)"
|
|
|
+ >取消</div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import wepy from '@wepy/core'
|
|
|
+import config from '@/config'
|
|
|
+wepy.page({
|
|
|
+ props: {},
|
|
|
+ data: {
|
|
|
+ h5Static: config.h5StaticPath,
|
|
|
+ h5StaticPath: config.h5StaticPath + '/page-xiaosa',
|
|
|
+ mailbox: 'sagacloud@sagacloud.cn',
|
|
|
+ phoneNum: '16601113547',
|
|
|
+ // phoneNum: '010 - 62668202',
|
|
|
+ visibale: false,
|
|
|
+ arr: [
|
|
|
+ {
|
|
|
+ id: '01',
|
|
|
+ title: '痛!大的开放办公区,员工量大,冷热不均,过度用电',
|
|
|
+ img: 'xiaosa-01.png',
|
|
|
+ content: [
|
|
|
+ { title: '您是否还在用传统的空调面板?', text: '空调面板一排排,随便调节后,不清楚调节的是什么位置的空调;调节后没有效果。' },
|
|
|
+ { title: '您是否经常听到有员工说办公室太热了;而有员工又说办公室太冷了?', text: '每个员工的体感温度不同,所需要的温度也是不一样的,无法照顾到每一个人,总是有员工不满意。' },
|
|
|
+ { title: '您是否经常发现办公区无人,照明仍然亮着?', text: '在阳光充足的情况下;午休的时间;下班后等,不需要照明,灯仍然亮着,能源浪费着。' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '02',
|
|
|
+ title: '痛!会议室管理不合理',
|
|
|
+ img: 'xiaosa-02.png',
|
|
|
+ content: [
|
|
|
+ { title: '没有预约机制', text: '经常有员工反馈,要么空出来好多会议室,要么没有可使用的会议室。' },
|
|
|
+ { title: '有预约机制', text: '有部分员工不做预约,直接使用,使用过程中,被赶出来;有部分员工预约时间比较久,实际开会时间很短,设备全开,无人使用。' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '03',
|
|
|
+ title: '难!老板间,要特殊关注',
|
|
|
+ img: 'xiaosa-03.png',
|
|
|
+ content: [
|
|
|
+ { title: '无法做到单独对老板间管理', text: '相关设备智能开关,根据老板个人情况智能控制,提前做好准备,让老板无感且舒适。' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '04',
|
|
|
+ title: '难!节能减排、双碳、ESG、企业可持续发展',
|
|
|
+ img: 'xiaosa-04.png',
|
|
|
+ content: [
|
|
|
+ { title: '', text: '低碳节能离不开全员的参与,而行为节能往往最不可控;' },
|
|
|
+ { title: '', text: '碳排放源不管是直接排放、能源间接排放还是其他间接排放,很难实现自身企业运营过程中的减碳。' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '05',
|
|
|
+ title: '您所担忧的问题,我们都能解决',
|
|
|
+ img: 'xiaosa-05.png',
|
|
|
+ titletop: 'SagaCare智慧办公整体解决方案:',
|
|
|
+ content: [
|
|
|
+ { title: '热舒适解决方案', text: '环境监测、空调个性化调节、空气质量管理等' },
|
|
|
+ { title: '光环境解决方案', text: '照明、遮阳、光感控制,节能管理等' },
|
|
|
+ { title: '智能会议室解决方案', text: '会议室预约、场景化控制、在室监测等' },
|
|
|
+ { title: '无感通行解决方案', text: '人脸识别门禁、访客管理等' },
|
|
|
+ { title: '…', text: '' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ openPop(val) {
|
|
|
+ this.visibale = val
|
|
|
+ },
|
|
|
+ handleCall() {
|
|
|
+ let _this = this
|
|
|
+ wx.makePhoneCall({
|
|
|
+ phoneNumber: this.phoneNum,
|
|
|
+ complete() {
|
|
|
+ _this.openPop(false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCopy() {
|
|
|
+ wx.setClipboardData({
|
|
|
+ data: this.mailbox,
|
|
|
+ success(res) {
|
|
|
+ wx.getClipboardData({
|
|
|
+ success(res) {
|
|
|
+ console.log(res.data) // data
|
|
|
+ wx.showToast({ title: '已复制', icon: 'none', duration: 1000 })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成(可以访问当前this实例)
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|
|
|
+<config>
|
|
|
+ {
|
|
|
+ navigationStyle:"custom",
|
|
|
+ backgroundColor: '#EBF5FA',
|
|
|
+ usingComponents: {
|
|
|
+ 'page-top-bar': '~@/components/common/page-top-bar',
|
|
|
+ "van-popup": "module:@vant/weapp/dist/popup"
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</config>
|