文章标题

最新推荐文章于 2024-04-24 18:16:27 发布
最新推荐文章于 2024-04-24 18:16:27 发布
阅读量184 收藏
点赞数
分类专栏： 前端设计 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21478985/article/details/52610100
版权

页面实现

<% include ../header.ejs %>
     <style type="text/css" xmlns="http://www.w3.org/1999/html">
    .modal-content {
        width: 800px;
    }
    .box-body .row {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .raw {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .content-block {
        padding: 10px;
        box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .07);
    }
    </style>

正文内容

<div class="row content-block" style="margin-left: 10px;margin-right: 10px">
    <div class="box-header">
        <div style="border-left: 3px solid #008fbf; height: 25px; float: left; margin-right: 10px;"></div>
        <h3 class="box-title" style="line-height: 25px">应用信息</h3>
    </div>
    <div class="box-body dataTables_wrapper form-inline dt-bootstrap">

        <form class="form-horizontal col-sm-12" method="post" action=" <%- req.url %> ">
            <div class="row">
                <div class="form-group col-sm-4">
                    <label class="col-sm-4 control-label">名称：</label>
                    <div class="col-sm-8">
                        <label class="control-label"><%= application.name %></label>
                    </div>
                </div>
                <div class="form-group col-sm-8">
                    <label class="col-sm-4 control-label">预览地址：</label>
                    <div class="col-sm-8">
                        <div id="qrcode"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-sm-4">
                    <label class="col-sm-4 control-label">图标：</label>
                    <div class="col-sm-8">
                        <img style="height: 25px; width: 25px" src="<%- application.icon %>">
                    </div>
                </div>
                <div class="form-group col-sm-8">
                    <label class="col-sm-4 control-label">创建时间：</label>
                    <div class="col-sm-8">
                        <label class="control-label"><%= Util.format(parseInt(application.createdat)) %></label>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row" style="display: flex">
    <div class="col-sm-7 content-block" style="margin:25px">
        <div class="box-header ">
            <div style="border-left: 3px solid #008fbf; height: 25px; float: left; margin-right: 10px;"></div>
            <h3 class="box-title" style="line-height: 25px">应用预览</h3>
        </div>
        <div class="box-body" style="text-align: center">
            <div class=" btn-group">
                <button id="btn1" type="button" class="btn  btn-primary" onclick="mystyleIphone5()">iPhone5
                </button>
                <button id="btn2" type="button" class="btn  btn-primary" onclick="mystyleIphone6()">iPhone6
                </button>
                <button id="btn3" type="button" class="btn  btn-primary" onclick="mystyleIphone6p()">iPhone6P
                </button>
                <button id="btn4" type="button" class="btn  btn-primary" onclick="mystyleAndroid()">Android
                </button>
            </div>
        </div>
        <div class="box-body" style="text-align: center">
            <div id="cellphone">
                <iframe id="appPreview" frameborder="0" src="/appLayout/map/home/<%= application.id %>"
                        style="min-height: 568px">
                </iframe>
            </div>
        </div>
    </div>

    <div class="col-sm-5 content-block" style="margin-right:25px;margin-top:25px;margin-bottom:25px">
        <div class="box-header ">
            <div style="border-left: 3px solid #008fbf; height: 25px; float: left; margin-right: 10px;"></div>
            <h3 class="box-title" style="line-height: 25px">应用发布</h3>
        </div>

        <form class="form-horizontal">
            <div class="row">
                <div class="form-group col-sm-12">
                    <div class="col-sm-offset-2">
                        <label class=" control-label">微信</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-sm-12">
                    <div class="col-sm-offset-2">
                        <a href="/cms/apppublish" class="btn btn-primary btn-lg">去发布</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

js代码

<script type="text/javascript" src="/lib/jquery.qrcode.min.js"></script>
<script>
    function mystyleIphone5() {
        document.getElementById("cellphone").style = "background:url(/images/iphone5.png) no-repeat center;text-align: center";
        document.getElementById("appPreview").width = 320;
        document.getElementById("appPreview").height = 568;
        document.getElementById("appPreview").style = "margin-bottom:100px;margin-top:108px;margin-left:20px;margin-right:18px";
    }
    function mystyleIphone6() {
        document.getElementById("cellphone").style = "background:url(/images/iphone6.png) no-repeat center;text-align: center";
        document.getElementById("appPreview").width = 375;
        document.getElementById("appPreview").height = 667;
        document.getElementById("appPreview").style = "margin-bottom:140px;margin-top:138px;margin-left:20px;margin-right:18px";
    }
    function mystyleIphone6p() {
        document.getElementById("cellphone").style = "background:url(/images/iphone6plus.png) no-repeat center;text-align: center"
        document.getElementById("appPreview").width = 414;
        document.getElementById("appPreview").height = 736;
        document.getElementById("appPreview").style = "margin-bottom:130px;margin-top:140px;margin-left:20px;margin-right:15px";
    }
    function mystyleAndroid() {
        document.getElementById("cellphone").style = "background:url(/images/android.png) no-repeat center;text-align: center"
        document.getElementById("appPreview").width = 360;
        document.getElementById("appPreview").height = 640;
        document.getElementById("appPreview").style = "margin-bottom:87px;margin-top:70px;margin-left:20px;margin-right:16px";
    }
    //    Window.onload= mystyleIphone5();
    $(function () {
        $("#btn1").click();
    });

    jQuery('#qrcode').qrcode({
        width: 80,
        height: 80,
        text: "http://<%= host %>:<%= port %>/appLayout/map/home/<%= application.id %>"
    });
    $('#btn1').click(function () {
        $(this).toggleClass('active');
        $("#btn2").removeClass("active");
        $("#btn3").removeClass("active");
        $("#btn4").removeClass("active");

    });
    $('#btn2').click(function () {
        $(this).toggleClass('active');
        $("#btn1").removeClass("active");
        $("#btn3").removeClass("active");
        $("#btn4").removeClass("active");

    });
    $('#btn3').click(function () {
        $(this).toggleClass('active');
        $("#btn1").removeClass("active");
        $("#btn2").removeClass("active");
        $("#btn4").removeClass("active");

    });
    $('#btn4').click(function () {
        $(this).toggleClass('active');
        $("#btn1").removeClass("active");
        $("#btn2").removeClass("active");
        $("#btn3").removeClass("active");

    });


</script>

效果预览

设计效果图，加载页面，默认为点击iphone5，点击不同按钮，呈现不同效果

普莫柯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 298
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
关于RN与webview的简单通信
qq_21478985的博客
08-21 569
1.RN向webview传值，js页面 import React, { Component } from 'react'; import { Text, View, WebView, StyleSheet, AppRegistry, TouchableOpacity, } from'react-native'; export default cla
风口的猪
qq_21478985的博客
12-12 235
风口之下，猪都能飞。当今中国股市牛市，真可谓“错过等七年”。 给你一个回顾历史的机会，已知一支股票连续n天的价格走势，以长度为n的整数数组表示，数组中第i个元素（prices[i]）代表该股票第i天的股价。 假设你一开始没有股票，但有至多两次买入1股而后卖出1股的机会，并且买入前一定要先保证手上没有股票。若两次交易机会都放弃，收益为0。 设计算法，计算你能获得的最大收益。 输入数值范围：2
使用POI生成文章标题
Cloud的专栏
09-24 7106
生成文章标题有两种方式，一种是自定义标题，还有一种是使用现有样式来生成，现在网上大部分是第一种方式，但这种方式有很多弊端，我们先来看第一种 第一步，引入依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.9</version> </dependency>
Markdown 跳转到本文章标题
小白学CS
10-30 4691
Markdown 跳转到本文章标题
RiPro主题文章标题美化教程 WordPress美化教程
03-02
/*文章标题优化*/ .sjblog-avatar {  width: 50px;  float: left; } .sjblog-avatar img {  float: left;  width: 50px;  border-radius: 50%;  margin-right: 20px; } .sjblog-tgroup{ ...
Wordpress自定义函数控制文章标题长度
09-29
主要为大家介绍了Wordpress自定义函数控制文章标题长度,需要的朋友可以参考下
Python3 文章标题关键字提取的例子
01-20
1.读取所有文章标题； 2.用“结巴分词”的工具包进行文章标题的词语分割； 3.用“sklearn”的工具包计算Tf-idf（词频-逆文档率）; 4.得到满足关键词权重阈值的词 结巴分词详见：结巴分词Github sklearn详见：文本...
PHPCMS内容页文章标题添加页码的方法教程
09-29
如何让PHPCMS的内容页标题显示页码呢？让每篇文章的标题都不一样，这样不但提高了网页体验率，同时也可以达到SEO优化的效果，让百度、谷歌等多收录一些。
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 417
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 599
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
Record Little
04-23 623
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 793
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 473
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
Vue-router的动态路由：获取传递的值
woliuhuaqiangla的博客
04-22 391
Vue.js是一款流行的JavaScript框架，用于构建单页面应用程序。它提供了许多有用的功能，其中之一是Vue-router，它允许您轻松地管理应用程序的路由。Vue-router支持动态路由，这意味着您可以在路由中使用变量，并在组件中访问它们。本文将介绍如何定义Vue-router的动态路由，以及如何获取传递的值。动态路由的优缺点动态路由是指根据特定的参数来动态地生成路由，这在使用Vue-router时是非常常见的。
后台管理系统加水印（react）
m0_63788547的博客
04-19 798
后台管理系统加水印（react）
ThreadLocal的使用
最新发布
m0_72363694的博客
04-24 114
用于不同线程下存储共享的数据变量，线程开启时接收当前的共享变量，其他线程开启时也可以接收，他们之间不会影响并且该threadLocal会作用在整个线程生命之间，也就意味着无论线程执行到哪一个代码类都能获取到存储的属性，相当于线程创建的属性，可用在该线程所要执行的任何对象的方法上获取，如前端请求开启线程-》controller-》service-》dao都是线程要执行的地方，而线程开启时创建了过Threadlocal则后继的执行的类区域都能获取到线程的ThreadLocal的存储对象，而且线程与线程之间不会干
wordpress 改写文章标题
03-20
您可以使用以下代码来改写 WordPress 文章标题： function custom_title( $title ) { $new_title = '新标题'; return $new_title; } add_filter( 'the_title', 'custom_title' ); 将“新标题”替换为您想要的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值