# Web前台开发
提供座席接听来话时，在业务引导菜单中自定义页面的前台展示部分，页面中可获取当前座席正在通话的呼叫信息作为数据输入，从定制服务接口中获取数据进行展示。
1. 前台展示页面（示例：CustomerInfoDemo.vue）。示例代码如下：
   ```
   <template>
     <div class="customer-info" ref="customerInfo">
       <div class="customer-info-col">
         <div class="photo">
           <img src="@/assets/img/custom-photo.png" alt="" />
         </div>
         <div class="name">
           <div class="text">Denis</div>
           <div class="grade">
             <img src="@/assets/img/grade.png" alt="" />
           </div>
         </div>
         <div class="custom-number">Service NO.907 135 089</div>
         <div class="grade-progress">
           <sweet-progress
               :text-inside="true"
               :stroke-width="32"
               :percentage="27"
               :show-text="false"
               color="#7fc823"
           />
         </div>
         ...
       </div>
       <div class="customer-info-col">
         <div class="title">Bill History</div>
         <div class="echarts" ref="main" id="echarts-main"></div>
       </div>
     </div>
   </template>
   <script>
   ...
   </script>
   <style lang="less" scoped>
   ...
   </style>
   ```
   
2. 前台控制逻辑。 通过vue父子组件引用的方式，将子页面CustomerInfoDemo.vue嵌入座席流程可视化的父页面servicecloud/aicc-web/src/views/ccmanagement/pages/iolp-service/IolpService.vue中。
   示例代码如下：
   ```
   <sweet-scrollbar class="iolp-right-scroll">
       <!-- 自定义页面 -->
       <div class="overview-label">
         <span>{{ $t('iolp.run.service.label.customizedPage') }}</span>
         <i :class="custPageShowFlag ? 'sweetui-icon-arrow-add iolp-arrow' : 'sweetui-icon-arrow-minus iolp-arrow'"
    @click="showOrHideCustPage"></i>
       </div>
       <div class="customized-page" v-if="custPageShowFlag && pageUrl == 'CustomerInfoDemo.vue'">
         <CustomerInfoDemo/>
       </div>
   
       ...
   
     </sweet-col>
   ```
   
3. 将自定义页面地址配置在流程属性的"定制页面地址"参数中。 ![](https://support.huaweicloud.com/devg-workbench-cec/figure/zh-cn_image_0000001678442698.png)