浏览代码

feat h5文章

anxiaoxia 3 年之前
父节点
当前提交
f2f00edd96
共有 3 个文件被更改,包括 377 次插入0 次删除
  1. 5 0
      src/router/index.ts
  2. 128 0
      src/views/officialAccount/css.css
  3. 244 0
      src/views/officialAccount/environment.vue

+ 5 - 0
src/router/index.ts

@@ -30,6 +30,11 @@ const routes: Array<RouteConfig> = [
         name: "horThree",
         component: () => import("@/views/horThree.vue"),
     },
+    {
+        path: "/officialAccount",
+        name: "officialAccount",
+        component: () => import("@/views/officialAccount/environment.vue"),
+    },
 ];
 
 const router = new VueRouter({

+ 128 - 0
src/views/officialAccount/css.css

@@ -0,0 +1,128 @@
+section,strong,p,br,img,span{
+    visibility: visible
+}
+.body-box{
+    max-width: 677px !important;
+    padding: 20px 16px 12px 16px;
+    margin-left: auto;
+    margin-right: auto;
+    color:#333333;
+}
+.inner{
+    max-width: 677px !important;
+}
+.head{
+    font-size: 22px;
+    line-height: 1.4;
+    margin-bottom: 14px;
+}
+.title {
+    display: flex;
+    align-items: flex-end;
+    visibility: visible;
+}
+.num-left {
+    width: 38px;
+    height: 38px;
+    background-color: rgb(185, 7, 12);
+    margin-right: 9px;
+    visibility: visible;
+    text-align: center;
+    font-size: 18px;
+    color: rgb(255, 224, 171);
+    line-height: 38px;
+}
+.num-right{
+    flex: 1 1 0%;
+}
+.title-text{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    text-align: justify;
+}
+.hori{
+    width: 100%;
+    height: 1px;
+    background-color: rgb(190, 70, 70);
+    margin-top: 2px;
+    margin-bottom: 5px;
+}
+p{
+    white-space: normal;
+    margin:8px 0;
+    padding:0;
+}
+.imgSt{
+    text-align: center;
+    white-space: normal;
+    visibility: visible !important;
+    /* width: 677px !important; */
+    width:100%;
+    height: auto !important;
+}
+.text{
+    width:100%;
+    font-size: 14px;
+    color: rgb(136, 136, 136);
+    word-wrap: break-word!important;
+    text-align:justify;
+
+}
+
+.box{
+    margin: 10px auto;
+}
+.container{
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(102, 105, 169);
+    padding-bottom: 25px;
+    padding-left: 25px;
+    font-family: 微软雅黑, "Microsoft YaHei";
+}
+.box-title{
+    width: 260px;
+    letter-spacing: 1.5px;
+    text-align: left;
+    margin-top: 10px;
+    font-size: 16px;
+    border-bottom: 4px solid rgb(102, 105, 169);
+    padding-bottom: 3px;
+}
+
+.container-text{
+    margin-top: 15px;
+    text-align: justify;
+    line-height: 1.75em;
+    letter-spacing: 1.5px;
+    font-size: 14px;
+}
+.title-common{
+    text-decoration: underline;
+    text-decoration-color: rgb(79, 129, 189);
+}
+
+.sagaMess{
+    padding: 30px 25px 40px;
+    border-radius: 7px;
+    background-color: rgb(242, 246, 255);
+}
+.mess-box{
+    padding: 20px;
+    border-radius: 20px;
+    box-shadow: rgb(169 187 223 / 45%) 6px 6px 8px, rgb(255 255 255) -2.5px -2.5px 5px;
+}
+.mess-text{
+    text-align: justify;
+    line-height: 1.75em;
+    letter-spacing: 1.5px;
+    font-size: 14px;
+    color: #6f85ac;
+    background: transparent;
+}
+.underL{
+    text-decoration: underline;
+    text-decoration-color: #4f81bd;
+}
+

+ 244 - 0
src/views/officialAccount/environment.vue

@@ -0,0 +1,244 @@
+<template>
+   <section class="body-box">
+    <section class="inner">
+        <h1 class="head">SagaCare 关心环境,更关心你</h1>
+        <br />
+        <section class="title">
+            <section class="num-left">
+                <strong>01</strong>
+            </section>
+            <section class="num-right">
+                <section class="title-text" style="font-size: 14px;">
+                    <span
+                        >&nbsp;痛!“大的开放办公区,员工量大,冷热不均,过度用电”</span
+                    >
+                </section>
+                <section class="hori"></section>
+            </section>
+        </section>
+        <p>
+            <span>
+                <img class="imgSt"  src="https://saga-data.oss-cn-beijing.aliyuncs.com/wechat/tweets/static/1.jpg" atl="图片" />
+            </span>
+        </p>
+        <p><span class="text">1、您是否还在用传统的空调面板?</span></p>
+        <p>
+            <span class="text"
+                >空调面板一排排,随便调节后,不清楚调节的是什么位置的空调;调节后没有效果。</span
+            >
+        </p>
+        <p>
+            <span class="text"
+                >2、您是否经常听到有员工说办公室太热了;而有员工又说办公室太冷了?</span
+            >
+        </p>
+        <p>
+            <span class="text"
+                >每个员工的体感温度不同,所需要的温度也是不一样的,无法照顾到每一个人,总是有员工不满意。</span
+            >
+        </p>
+        <p>
+            <span class="text"
+                >3、您是否经常发现办公区无人,照明仍然亮着?</span
+            >
+        </p>
+        <p>
+            <span class="text"
+                >在阳光充足的情况下;午休的时间;下班后等,不需要照明,灯仍然亮着,能源浪费着。</span
+            >
+        </p>
+        <br />
+        <section class="title">
+            <section class="num-left">
+                <strong>02</strong>
+            </section>
+            <section class="num-right">
+                <section class="title-text">
+                    <span>&nbsp; 痛!“会议室管理不合理”</span>
+                </section>
+                <section class="hori"></section>
+            </section>
+        </section>
+        <p>
+            <span class="imgBox">
+                <img class="imgSt" loading="lazy" src="https://saga-data.oss-cn-beijing.aliyuncs.com/wechat/tweets/static/2.jpg" atl="图片" />
+            </span>
+        </p>
+
+        <p>
+            <span class="text"
+                >1、没有预约机制:经常有员工反馈,要么空出来好多会议室,要么没有可使用的会议室。</span
+            >
+        </p>
+        <p>
+            <span class="text"
+                >2、有预约机制:有部分员工不做预约,直接使用,使用过程中,被赶出来;有部分员工预约时间比较久,实际开会时间很短,设备全开,无人使用。</span
+            >
+        </p>
+        <br />
+        <section class="title">
+            <section class="num-left">
+                <strong>03</strong>
+            </section>
+            <section class="num-right">
+                <section class="title-text">
+                    <span>&nbsp; 难!“老板间,要特殊关注”</span>
+                </section>
+                <section class="hori"></section>
+            </section>
+        </section>
+        <p>
+            <span>
+                <img class="imgSt" loading="lazy" src="https://saga-data.oss-cn-beijing.aliyuncs.com/wechat/tweets/static/3.jpg" atl="图片" />
+            </span>
+        </p>
+
+        <p>
+            <span class="text"
+                >无法做到单独对老板间管理:相关设备智能开关,根据老板个人情况智能控制,提前做好准备,让老板无感且舒适。</span
+            >
+        </p>
+        <br />
+        <section class="title">
+            <section class="num-left">
+                <strong>04</strong>
+            </section>
+            <section class="num-right">
+                <section class="title-text">
+                    <span>&nbsp;难!“节能减排、双碳、ESG、企业可持续发展”</span>
+                </section>
+                <section class="hori"></section>
+            </section>
+        </section>
+        <p>
+            <span>
+                <img class="imgSt" loading="lazy" src="https://saga-data.oss-cn-beijing.aliyuncs.com/wechat/tweets/static/4.jpg" atl="图片" />
+            </span>
+        </p>
+        <p>
+            <span class="text"
+                >低碳节能离不开全员的参与,而行为节能往往最不可控;碳排放源不管是碳排放源不管是直接排放、能源间接排放还是其他间接排放,很难实现自身企业运营过程中的减碳。</span
+            >
+        </p>
+        <br />
+        <section class="title">
+            <section class="num-left">
+                <strong>05</strong>
+            </section>
+            <section class="num-right">
+                <section class="title-text" style="color: #6669a9;">
+                    <span>&nbsp;您所担忧的问题,我们都能解决</span>
+                </section>
+                <section class="hori"></section>
+            </section>
+        </section>
+        <section class="box">
+            <section class="container">
+                <section class=""></section>
+                <section class="box-title">
+                    SagaCare智慧办公整体解决方案
+                </section>
+
+                <br />
+                <section class="container-text">
+                    <p>
+                        <span class="title-common"
+                            ><em><strong>- 热舒适解决方案</strong></em></span
+                        >
+                    </p>
+                    <p>
+                        <span>· 环境监测、空调个性化调节、空气质量管理等</span>
+                    </p>
+                    <p>
+                        <span class="title-common"
+                            ><em><strong>- 光环境解决方案</strong></em></span
+                        >
+                    </p>
+                    <p><span>· 照明、遮阳、光感控制,节能管理等</span></p>
+                    <p>
+                        <span class="title-common"
+                            ><em
+                                ><strong>- 智能会议室解决方案</strong></em
+                            ></span
+                        >
+                    </p>
+                    <p><span>· 会议室预约、场景化控制、在室监测等</span></p>
+                    <p>
+                        <span class="title-common"
+                            ><em><strong>- 无感通行解决方案</strong></em></span
+                        >
+                    </p>
+                    <p><span>· 人脸识别门禁、访客管理等</span></p>
+                    <p>
+                        <span class="title-common"
+                            ><em><strong>……</strong></em></span
+                        >
+                    </p>
+                </section>
+            </section>
+        </section>
+
+        <p>
+            <span class="text">开启智慧办公</span>
+        </p>
+        <section>
+            <video
+                class="imgSt"
+                src="https://saga-data.oss-cn-beijing.aliyuncs.com/wechat/tweets/static/video.mp4"
+                controls="controls"
+                type="video/mp4"
+                loop="loop"
+                preload="preload"
+            >
+            <!-- <video
+                class="imgSt"
+                src="./statics/video.mp4"
+                controls="controls"
+                type="video/mp4"
+                loop="loop"
+                preload="preload"
+            > -->
+                Your browser does not support the video tag.
+            </video>
+        </section>
+        <br />
+        <section>
+            <section class="sagaMess">
+                <section class="mess-box">
+                    <section class="mess-text">
+                        <p><strong>SagaCare – Care about you</strong></p>
+                        <p><br /></p>
+                        <p>更多智慧办公解决方案请详询:</p>
+                        <p>
+                            <span class="underL"
+                                ><em
+                                    ><strong>电话:010 - 62668202</strong></em
+                                ></span
+                            >
+                        </p>
+                        <p>
+                            <span class="underL"
+                                ><em
+                                    ><strong
+                                        >邮箱:sagacloud@sagacloud.cn</strong
+                                    ></em
+                                ></span
+                            >
+                        </p>
+                        <p><br /></p>
+                        <p>
+                            <span
+                                >*各版块解决方案内容均包含硬件实施、软件配置、定制化咨询服务</span
+                            >
+                        </p>
+                    </section>
+                </section>
+            </section>
+        </section>
+    </section>
+   </section>
+</template>
+<style>
+@import "./css.css";
+</style>
+