随笔 - 936  文章 - 0  评论 - 3  阅读 - 30万

【开发记录】网络摄像头国标GB28181协议EasyGBS广告宣传位动态配置更新说明

大家熟知的国标GB28181协议视频平台EasyGBS界面调整之后,很多用户都反馈新界面更加简洁大方了,并且登录页的广告位也为项目的宣传起到了部分作用。

TSINGSEE青犀视频云边端产品开发的登录页宣传位的开发过程,我们也和大家做了分享(登录页如何实现插入产品广告位),EasyGBS广告宣传位目前是静态,为了能更好对项目进行展现,我们打算对该宣传位进行动态调整。

调整过程大致如下:
首先前端需要配置宣传位的页面,通过配置页面来配置所有宣传位的信息,然后在登录页通过接口获取相应信息,渲染到页面上即可。参考代码:

<el-form-item label="宣传图点选:" class="publicity">
        <span
          v-for="(item, index) in ruleForm1.logoData"
          :key="index"
          class="publicityBox"
        >
          <el-checkbox v-model="item.Open" :disabled="!admin"  @change="logoChange($event, item)">
            <div class="contaient_img">
              <img :src="imgUrl(item.ImageUrl)" alt />
            </div>
            <div class="logoTitle">{{ item.Title }}</div>
          </el-checkbox>
          <div class="operationBox">
            <div class="contanter">
              <span class="img_edit" @click.stop="logoEdit(item)">
                <i class="iconfont iconbianji"></i>
              </span>
              <span class="img_del" @click.stop="logoDele(item.Id)">
                <i class="iconfont iconshanchu"></i>
              </span>
            </div>
          </div>
        </span>
        <el-checkbox class="nopictures" v-show="admin">
          <div class="contaient_img" @click="dialogVisible = true">
            <img src="../../assets/images/nopictures.png" alt />
            <span class="img_add">
              <i class="iconfont iconadd" ></i>
            </span>
          </div>
          <div class="logoTitle">暂无图片</div>
        </el-checkbox>
      </el-form-item>
    </el-form>

通过上图可以看到,用户可以自由添加或者删减宣传位图片,这一改动提高了平台的开放性。如果大家还想了解更多EasyGBS相关内容,欢迎联系我们。TSINGSEE青犀视频云边端全线产品均提供了测试版本供大家试用,欢迎咨询。

posted on   EasyGBS  阅读(226)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示