修改政务体验员

nngkxxdp/src/main/resources/static/naxsb/zwfwtyy.html

@@ -95,31 +95,6 @@
             margin-bottom: 40px;
         }
 
-        .fwlc {
-            margin: auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .fwlc .text {
-            width: 236px;
-            height: 70px;
-            line-height: 70px;
-            background: #1982DE;
-            border-radius: 20px;
-            font-size: 20px;
-            color: #FFFFFF;
-            text-align: center;
-        }
-
-        .fwlc .arrow {
-            width: 114px;
-            height: 135px;
-            background-image: url(images/arrow2.png);
-            background-size: 100% 100%;
-        }
-
         .el-carousel__item img {
             width: 100%;
             height: 501px;
@@ -173,80 +148,359 @@
                 height: 530px !important;
             }
         }
+
+        .titleList {
+            width: 100%;
+            display: flex;
+            position: relative;
+        }
+
+        .titleList .list {
+            width: 261px;
+            height: 142px;
+            line-height: 68px;
+            font-family: DOUYU;
+            font-weight: normal;
+            font-size: 26px;
+            color: #FFFFFF;
+            text-align: center;
+            text-shadow: 0px 4px 5px rgba(159, 90, 19, 0.34);
+            z-index: 2;
+            margin-left: 70px;
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+        }
+
+        .titleList .list>div {
+            background-image: url(images/bg-tyy22.png);
+            background-size: 100% 100%;
+            height: 68px;
+        }
+
+        .titleList .active {
+            background-image: url(images/bg-tyy1.png);
+            background-size: 100% 100%;
+        }
+
+        .titleList .active>div {
+            background-image: none;
+        }
+
+        .titleList img {
+            position: absolute;
+            bottom: 6px;
+            z-index: 1;
+            width: 1400px;
+        }
+
+        .titcon .number1 {
+            background-image: url(images/num-tyy1.png);
+            background-size: 100% 100%;
+            width: 70px;
+            height: 55px;
+            font-family: DOUYU;
+            font-weight: normal;
+            font-size: 20px;
+            color: #FFFFFF;
+            line-height: 61px;
+            padding-left: 5px;
+            box-sizing: border-box;
+        }
+
+        .titcon>div {
+            display: flex;
+            margin-top: 50px;
+        }
+
+        .titcon .con1 {
+            text-indent: 20px;
+            font-size: 20px;
+            color: #333333;
+            line-height: 30px;
+            margin-left: 10px;
+            width: calc(100% - 80px);
+        }
+
+        .titcon .number2 {
+            width: 32px;
+            height: 25px;
+            font-size: 10px;
+            line-height: 25px;
+        }
+
+        .titcon .con2 {
+            line-height: 25px;
+            text-indent: 0;
+            width: calc(100% - 32px);
+        }
+
+        .titcon1>div {
+            margin-top: 25px;
+        }
+
+        .bmtitle {
+            background-image: url(images/bg-tyybm.png);
+            background-size: 100% 100%;
+            width: 188px !important;
+            height: 67px;
+            padding-left: 20px;
+            box-sizing: border-box;
+            font-family: DOUYU;
+            font-weight: normal;
+            font-size: 26px;
+            color: #FFFFFF;
+            line-height: 62px;
+            margin-top: 40px;
+        }
+
+        .con3 {
+            background: #BADAF6;
+            padding: 10px 40px;
+            margin-top: 10px;
+            width: auto;
+        }
+
+        .carosName {
+            position: absolute;
+            height: 50px;
+            bottom: 0px;
+            width: 100%;
+            background: hsl(0deg 2.19% 24.32% / 50%);
+            color: #fff;
+            font-size: 22px;
+            line-height: 50px;
+            padding-left: 30px;
+        }
     </style>
 </head>
 
 <body>
     <div>
-        <div class="topBg" style="background-image: url(images/indexbg-tyy.png);background-color: #DDEDFF;">
-            <div class="title">活动介绍</div>
-        </div>
-        <div class="content" id="qqhg" style="padding: 0;">
-            <div class="project">
-                为推动政务服务效能持续提升，南岸区面向企业、群众、专家等公开征集政务服务体验员，规范体验员征集流程和管理机制，通过开展座谈交流、集中研讨等多种形式，充分激发体验员积极性和主动性，既当好“监督员”，对堵点问题和意见建议及时反馈，为政务服务发展献计献策，也当好“宣传员”，为便民利企、好用易用的服务代言，从企业和群众视角找准政务服务改革创新的着力点和发力点，让更多企业和群众享受到政务服务改革红利。
-            </div>
-            <div class="fwlc" style="width: 70%;">
-                <div class="text">在线申请</div>
-                <div class="arrow"></div>
-                <div class="text">在线审核</div>
-                <div class="arrow"></div>
-                <div class="text">审核成功</div>
+        <div style="width:100%;" class="header"></div>
+        <div id="qqhg">
+            <div class="topBg" style="background-image: url(images/indexbg-tyy.png);background-color: #DDEDFF;">
+                <div class="title">活动介绍</div>
             </div>
-            <p class="topButton" style="width: 586px;margin: auto;" @click="dialogVisible = true">立即报名</p>
-            <el-dialog title="政务服务体验员报名表" :visible.sync="dialogVisible" width="40vw" @close="handleClose"
-                :close-on-click-modal="false">
-                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-                    <el-form-item label="姓名" prop="experienceName">
-                        <el-input v-model="form.experienceName" placeholder="请输入姓名"></el-input>
-                    </el-form-item>
-                    <el-form-item label="年龄" prop="experienceAge">
-                        <el-input v-model.number="form.experienceAge"
-                            @input="form.experienceAge = form.experienceAge.replace(/[^d]/g,'')" placeholder="请输入年龄">
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item label="单位" prop="workunit">
-                        <el-input v-model="form.workunit" placeholder="请输入单位"></el-input>
-                    </el-form-item>
-                    <el-form-item label="职务" prop="duty">
-                        <el-input v-model="form.duty" placeholder="请输入职务"></el-input>
-                    </el-form-item>
-                    <el-form-item label="手机号" prop="experiencePhone">
-                        <el-input v-model="form.experiencePhone" placeholder="请输入手机号" maxlength="11" show-word-limit
-                            @blur="validatePhone"></el-input>
-                    </el-form-item>
-                    <el-form-item label="拟办理业务">
-                        <el-input type="textarea" v-model="form.business" placeholder="请输入拟办理业务"></el-input>
-                    </el-form-item>
-                    <el-form-item label="验证码" prop="imgCode">
-                        <div style="display: flex;">
-                            <el-input v-model="form.imgCode" placeholder="请输入验证码"></el-input>
-                            <el-image :src="imageCode" @click="getVerifyCode"></el-image>
+            <div class="content" style="padding: 0;">
+                <div class="project">
+                    为聚焦人民群众关切、困扰市场主体、制约经济社会高质量发展的突出问题，持续提升政务服务效能，南岸区行政服务中心面向全区公开邀请50位不同年龄、不同行业领域的企业和群众代表，担任“政务服务体验员”，近距离、全过程体验政务服务事项办理，发现政务服务中存在的堵点、难点。通过座谈交流、集中研讨等交流活动，体验员们将为政务服务的进一步发展提出宝贵意见和建议。体验员们将代表广大企业和群众，从实际体验出发，精准定位政务服务改革的创新点和突破点，确保更多企业和群众能够切实感受到政务服务改革所带来的便利和实惠。
+                </div>
+                <p class="topButton" style="width: 586px;margin: auto;"
+                    @click="window.open('https://www.cqna.gov.cn/igixmj/gkzxdc/202310/tSurvey_97e335b28ad6d47c018b47619b680004.html')">
+                    立即报名</p>
+                <el-dialog title="政务服务体验员报名表" :visible.sync="dialogVisible" width="40vw" @close="handleClose"
+                    :close-on-click-modal="false">
+                    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+                        <el-form-item label="姓名" prop="experienceName">
+                            <el-input v-model="form.experienceName" placeholder="请输入姓名"></el-input>
+                        </el-form-item>
+                        <el-form-item label="年龄" prop="experienceAge">
+                            <el-input v-model.number="form.experienceAge"
+                                @input="form.experienceAge = form.experienceAge.replace(/[^d]/g,'')"
+                                placeholder="请输入年龄">
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="单位" prop="workunit">
+                            <el-input v-model="form.workunit" placeholder="请输入单位"></el-input>
+                        </el-form-item>
+                        <el-form-item label="职务" prop="duty">
+                            <el-input v-model="form.duty" placeholder="请输入职务"></el-input>
+                        </el-form-item>
+                        <el-form-item label="手机号" prop="experiencePhone">
+                            <el-input v-model="form.experiencePhone" placeholder="请输入手机号" maxlength="11" show-word-limit
+                                @blur="validatePhone"></el-input>
+                        </el-form-item>
+                        <el-form-item label="拟办理业务">
+                            <el-input type="textarea" v-model="form.business" placeholder="请输入拟办理业务"></el-input>
+                        </el-form-item>
+                        <el-form-item label="验证码" prop="imgCode">
+                            <div style="display: flex;">
+                                <el-input v-model="form.imgCode" placeholder="请输入验证码"></el-input>
+                                <el-image :src="imageCode" @click="getVerifyCode"></el-image>
+                            </div>
+                        </el-form-item>
+                        <el-form-item class="subButton">
+                            <el-button type="primary" @click="submitForm('form')">提交</el-button>
+                            <el-button @click="dialogVisible = false">取消</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-dialog>
+                <div class="titleList">
+                    <div class="list" :class="{ active: currActive == 1 }" style="margin-left: 81px;"
+                        @click="currActive=1">
+                        <div>体验任务</div>
+                    </div>
+                    <div class="list" :class="{ active: currActive == 2 }" @click="currActive=2">
+                        <div>体验方式</div>
+                    </div>
+                    <div class="list" :class="{ active: currActive == 3 }" @click="currActive=3">
+                        <div>招募条件</div>
+                    </div>
+                    <div class="list" :class="{ active: currActive == 4 }" @click="currActive=4">
+                        <div>纪律要求</div>
+                    </div>
+                    <img src="images/bg-tyyline.png" alt="">
+                </div>
+                <div class="titcon" v-if="currActive == 1">
+                    <div>
+                        <div class="number1">01</div>
+                        <div class="con1">以“用户视角”体验监督全区政务服务工作，体验办事流程、检视办事指南、感受服务质效，并将体验的过程、感受、意见建议等，通过纸质件或电子件等方式反馈至区政务办。
+                        </div>
+                    </div>
+                    <div>
+                        <div class="number1">02</div>
+                        <div class="con1">以“用户视角”体验监督全区政务服务工作，体验办事流程、检视办事指南、感受服务质效，并将体验的过程、感受、意见建议等，通过纸质件或电子件等方式反馈至区政务办。
+                        </div>
+                    </div>
+                </div>
+                <div class="titcon titcon1" v-if="currActive == 2">
+                    <div>
+                        <div class="number1">01</div>
+                        <div class="con1"><span style="color:#1982DE;">线上体验：</span>
+                            通过重庆政务服务网、“渝快办”APP、“南岸区人民政府”微信公众号，重点体验网办流程是否流畅、网办方式是否便于操作、办事指南是否准确、政策信息是否实时更新。
+                        </div>
+                    </div>
+                    <div>
+                        <div class="number1">02</div>
+                        <div class="con1"><span
+                                style="color:#1982DE;">线上体验：</span>到南岸区各级政务服务中心全流程体验政务服务事项业务咨询、取号、排队、填表、提交申报材料、办理结果领取、评价等，实地感受窗口服务是否优质、办事效率是否高效、办理流程是否合理、办理结果是否满意。
                         </div>
-                    </el-form-item>
-                    <el-form-item class="subButton">
-                        <el-button type="primary" @click="submitForm('form')">提交</el-button>
-                        <el-button @click="dialogVisible = false">取消</el-button>
-                    </el-form-item>
-                </el-form>
-            </el-dialog>
-            <div class=" title">往期回顾</div>
-            <div style="width: 100%;margin-top: 20px;">
-                <el-carousel :interval="4000" type="card" height="501px">
-                    <el-carousel-item v-for="item in 1" :key="item">
-                        <img class="medium" src="images/gwhg1.png"></img>
-                    </el-carousel-item>
-                </el-carousel>
+                    </div>
+                </div>
+                <div class="titcon titcon1" v-if="currActive == 3">
+                    <div>
+                        <div class="number1 number2">01</div>
+                        <div class="con1 con2">南岸区常住居民或在南岸区工作、生活，年龄在18周岁以上、65周岁以下，身体健康，具备有完全民事行为能力，具有良好信用的市民群众 </div>
+                    </div>
+                    <div>
+                        <div class="number1 number2">02</div>
+                        <div class="con1 con2">对政务服务基本情况了解，热心公益事业、社会责任感强，有参与体验活动的意愿；</div>
+                    </div>
+                    <div>
+                        <div class="number1 number2">03</div>
+                        <div class="con1 con2">有较好的人际沟通、语言文字表达和分析研究能力，能够客观真实地反映问题并提出意见建议；</div>
+                    </div>
+                    <div>
+                        <div class="number1 number2">04</div>
+                        <div class="con1 con2">有较强的法治观念和良好的职业道德，无违法犯罪记录。</div>
+                    </div>
+                </div>
+                <div class="titcon titcon1" v-if="currActive == 4">
+                    <div>
+                        <div class="number1 number2">01</div>
+                        <div class="con1 con2">必须自觉遵守法律法规。</div>
+                    </div>
+                    <div>
+                        <div class="number1 number2">02</div>
+                        <div class="con1 con2">在体验活动中获取的资料、信息、问题线索以及形成的书面材料，要及时整理报送区政务办，不得以“政务服务体验员”或个人名义擅自向社会发布。</div>
+                    </div>
+                    <div>
+                        <div class="number1 number2">03</div>
+                        <div class="con1 con2">不得以“政务服务体验员”名义开设网站及新媒体账号。</div>
+                    </div>
+                    <div>
+                        <div class="number1 number2">04</div>
+                        <div class="con1 con2">不得以“政务服务体验员”身份干预、影响窗口单位正常工作。</div>
+                    </div>
+                    <div>
+                        <div class="number1 number2">05</div>
+                        <div class="con1 con2">严禁接受涉及被体验单位的宴请、礼品、礼金、有价证券及娱乐、旅游等活动。</div>
+                    </div>
+                    <div>
+                        <div class="number1 number2">06</div>
+                        <div class="con1 con2">严禁利用“政务服务体验员”身份谋取私利或其他不正当利益。</div>
+                    </div>
+                    <div>
+                        <div class="number1 number2">07</div>
+                        <div class="con1 con2">对违反法律法规、工作纪律或收到投诉举报的，一经核实，立即解除聘任，并报请主管单位和组织、纪检部门处理，情节严重的移交司法机关依法查处。</div>
+                    </div>
+                    <div>
+                        <div class="number1 number2">08</div>
+                        <div class="con1 con2">体验活动往返过程的安全问题自行负责</div>
+                    </div>
+                </div>
+
+                <div class="title">报名时间及方式</div>
+                <div style="font-size: 20px;color: #333;">
+                    <div class="bmtitle">
+                        报名方式
+                    </div>
+                    <div><span style="color:#1982DE">方式一：</span>请通过南岸区政府网站报名</div>
+                    <div class="con3" style="width: 1038px;">
+                        https://www.cqna.gov.cn/igixmj/gkzxdc/202310/tSurvey_97e335b28ad6d47c018b47619b680004.html</div>
+                    <div style="margin-top: 20px;margin-bottom:10px;"><span
+                            style="color:#1982DE">方式二：</span>扫描下方二维码填写报名表（所填信息只用作体验招募，不作其他用途活动，组织者将根据法律法规规定，在活动结束后及时删除相关个人信息)。
+                    </div>
+                    <img src="images/erweima.png" alt="">
+                    <div class="bmtitle">
+                        咨询电话
+                    </div>
+                    <div class="con3" style="width: 297px;">电话：023-62606729</div>
+                    <div class="bmtitle">
+                        招募时间
+                    </div>
+                    <div class="con3" style="width: 410px;">2024年10月16日至2024年12月31日</div>
+                    <div class="bmtitle">
+                        招募说明
+                    </div>
+                    <div class="con3" style="width: 1053px;">体验员工作性质为<span
+                            style="color: #FF8400;">公益性义务工作，无劳动报酬，聘请周期为1年，聘期届满自动解聘，根据工作需要可以续聘。</span></div>
+                </div>
+                <div class=" title">往期回顾</div>
+                <div style="width: 100%;margin-top: 20px;">
+                    <el-carousel :interval="4000" type="card" height="501px">
+                        <!-- <el-carousel-item v-for="(item,index) in imgList" :key="index" @click="goDteail(item.url)">
+                        <img class="medium" :src=item.imgurl></img>
+                        <div>{{item.name}}</div>
+                    </el-carousel-item> -->
+                        <el-carousel-item
+                            style="position: relative;">
+                            <img class="medium" src="images/5-1.jpg"
+                            @click="goDteail('https://www.cqna.gov.cn/zwxx_254/bmjz/202404/t20240415_13129572.html')"></img>
+                            <div class="carosName">5月活动</div>
+                        </el-carousel-item>
+                        <el-carousel-item>
+                            <img class="medium" src="images/6-1.jpg"></img>
+                            <div class="carosName">6月活动</div>
+                        </el-carousel-item>
+                        <el-carousel-item>
+                            <img class="medium" src="images/9-1.jpg"></img>
+                            <div class="carosName">9月活动</div>
+                        </el-carousel-item>
+                        <el-carousel-item>
+                            <img class="medium" src="images/10-1.jpg"></img>
+                            <div class="carosName">10月活动</div>
+                        </el-carousel-item>
+                        <el-carousel-item>
+                            <img class="medium" src="images/11-1.jpg"
+                            @click="goDteail('https://mp.weixin.qq.com/s?__biz=MzU4MTY2MzgzOA==&mid=2247590002&idx=3&sn=6fe079c18d08ebccabb368cdedb4cbc1&chksm=fc197600696bba4b487484a66c0f189b728c4f92e638c3f69e8046ba4e806e2269c9de13269c&scene=27')"></img>
+                            <div class="carosName">“政务服务体验员”11月活动</div>
+                        </el-carousel-item>
+                    </el-carousel>
+                </div>
             </div>
         </div>
+
+        <div style="width:100%;" class="footer"></div>
     </div>
 </body>
 <script>
-    
+    $(function () {
+
+        $(".header").load('top/top_style.html');
+        $(".footer").load('footer/footer.html');
+    });
+</script>
+<script>
+
     new Vue({
         el: '#qqhg',
         data: function () {
             return {
                 dialogVisible: false,
+                currActive: 1,
                 reqPtah: '',
                 form: {
                     experienceName: '',
@@ -277,7 +531,28 @@
                     imgCode: [
                         { required: true, message: '请输入验证码', trigger: 'blur' }
                     ]
-                }
+                },
+                imgList: [{
+                    name: '5月活动',
+                    url: 'https://www.cqna.gov.cn/zwxx_254/bmjz/202404/t20240415_13129572.html',
+                    imgurl: 'images/5-1.jpg'
+                }, {
+                    name: '6月活动',
+                    url: '',
+                    imgUrl: 'images/6-1.jpg'
+                }, {
+                    name: '9月活动',
+                    url: '',
+                    imgUrl: 'images/9-1.jpg'
+                }, {
+                    name: '10月活动',
+                    url: '',
+                    imgUrl: 'images/10-1.jpg'
+                }, {
+                    name: '“政务服务体验员”11月活动',
+                    url: 'https://mp.weixin.qq.com/s?__biz=MzU4MTY2MzgzOA==&mid=2247590002&idx=3&sn=6fe079c18d08ebccabb368cdedb4cbc1&chksm=fc197600696bba4b487484a66c0f189b728c4f92e638c3f69e8046ba4e806e2269c9de13269c&scene=27',
+                    imgUrl: 'images/11-1.JPG'
+                }]
             };
         },
         methods: {
@@ -285,8 +560,11 @@
                 this.dialogVisible = false;
                 this.$refs.form.resetFields();
             },
+            goDteail(url) {
+                window.open(url)
+            },
             validatePhone() {
-                
+
                 const reg = /^1[3-9]\d{9}$/;
                 if (!reg.test(this.form.experiencePhone)) {
                     this.$message.error('请输入有效的手机号');
@@ -307,17 +585,17 @@
                             url: conpath + '/experienceApply',
                             type: 'post',
                             contentType: 'application/json; charset=utf-8',
-                            data: JSON.stringify(formData), 
+                            data: JSON.stringify(formData),
                             dataType: 'json',
                             success: function (data) {
                                 if (data.result === 'ok') {
                                     this.$message.success('报名成功！');
-                                    this.dialogVisible = false; 
+                                    this.dialogVisible = false;
                                 } else {
                                     this.getVerifyCode();
                                     this.$message.error(data.success || '报名失败！');
                                 }
-                            }.bind(this), 
+                            }.bind(this),
                             error: function (data) {
                                 console.log("错误信息:", data);
                             }
@@ -333,8 +611,8 @@
                 for (var i = 0; i < 36; i++) {
                     s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                 }
-                s[14] = "4"; 
-                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); 
+                s[14] = "4";
+                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                 s[8] = s[13] = s[18] = s[23] = "-";
 
                 var uuid = s.join("");