原生和vue公用 适配pc,平板移动模板

最新推荐文章于 2024-04-01 09:37:54 发布
最新推荐文章于 2024-04-01 09:37:54 发布
阅读量99 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60477441/article/details/133178141
版权

vue

<template>
  <div>
    <!-- 导航栏（PC端） -->
    <div class="header">
      <div class="navigation">
        <a href="#">首页</a>
        <a href="#">产品</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
      </div>
      <!-- 移动端导航图标 -->
      <div class="nav-icon" @click="toggleMobileNav">&#9776;</div>
      <!-- Logo（共享） -->
      <div class="logo">
        <img src="../little.com/images/logo.jpg" alt="Logo" class="lg">
      </div>
      <!-- 搜索和购物车（共享） -->
      <div class="SearchCart">
        <input type="text" placeholder="搜索" class="search" id="search">
        <div class="cart" @mouseover="showCartContent" @mouseout="hideCartContent" @click="toggleCartContent">
          <span class="cart-icon">&#128722;</span>
          <span class="cart-badge" id="cartBadge">0</span>
          <div class="cart-content" id="cartContent"></div>
        </div>
      </div>
    </div>
    <div class="header2">
      <div class="navigat">
        <a href="#">首页</a>
        <a href="#">产品</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
      </div>
    </div>
    <div class="mobile-nav" id="mobileNav">
      <div class="mobaleC">
        <img src="../323/closeBtnPic.svg" alt="" class="mobileClose" id="mobileClose" @click="mobileCloseBtnFn">
      </div>
      <a href="#">首页</a>
      <a href="#" @click="menuSecondshowFn">产品 <span class="Collapsible__Plus" :text="menuPlus">+</span></a>
      <ul class="menuSecond" id="menuSecond">
        <li>TOOLS</li>
        <li>LEATHER</li>
        <li>CRAETING SUPPLIES</li>
        <li>ACRYLIC TEMPLATES</li>
        <li>DOWNLOADABLE DIGITAL PATTERNS</li>
      </ul>
      <a href="#">关于我们</a>
      <a href="#">联系我们</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuPlus: '+',
    };
  },
  methods: {
    toggleMobileNav() {
      const mobileNav = document.getElementById('mobileNav');
      if (mobileNav.style.left === '-100%' || mobileNav.style.left === '') {
        mobileNav.style.left = '0';
      } else {
        mobileNav.style.left = '-100%';
      }
    },
    mobileCloseBtnFn() {
      const mobileNav = document.getElementById('mobileNav');
      mobileNav.style.left = '-100%';
    },
    showCartContent() {
      const cartContent = document.getElementById('cartContent');
      cartContent.style.display = 'block';
    },
    hideCartContent() {
      const cartContent = document.getElementById('cartContent');
      cartContent.style.display = 'none';
    },
    menuSecondshowFn() {
      const menuSecond = document.getElementById('menuSecond');
      if (menuSecond.style.display === 'none' || menuSecond.style.display === '') {
        menuSecond.style.display = 'block';
        this.menuPlus = '-';
      } else {
        menuSecond.style.display = 'none';
        this.menuPlus = '+';
      }
    },
  },
};
</script>

<style scoped>
/* Your CSS styles here */
  /* 基本样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 共享头部样式 */
        .header {
            background-color: #1c1b1b;
            color: white;
            padding: 10px;
            display: flex;
            align-items: center;
        }

        .header2 {
            width: auto;
            background-color: #1c1b1b;
            color: white;
            padding: 10px;
            display: flex;
            align-items: center;
            margin: 0 auto;
            display: none;
        }

        .navigation a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
        }

        .navigat a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
        }


        .logo {
            width: auto;
            /* 将宽度设置为自动 */
            height: 85px;
            /* 使其水平居中 */
            display: block;

            /* 添加此行 */
            .lg {

                margin: 0 auto;
            }
        }

        /* 移动端nav */
        .mobile-nav {
            display: none;
            position: fixed;
            top: 0;
            left: -100%;
            /* Initially hidden off the left side of the viewport */
            width: 60%;
            /* Adjust the width as needed */
            height: 100%;
            background-color: #1c1b1b;
            color: white;
            z-index: 2;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: left 0.3s ease-in-out;
            /* Add smooth transition */
            padding-left: 18px;
            padding-right: 24px;


        }

        .mobaleC {
            display: block;
            height: 60px;

        }

        .mobileClose {
            width: 20%;
            margin-left: -30px;
        }

        .mobile-nav a {
            display: block;
            color: white;
            text-decoration: none;
            position: relative;
            width: 100%;
            padding: 20px 0;
            text-align: left;
            cursor: pointer;
            border-bottom: 1px solid #818181;
        }

        .mobile-nav a span {
            float: right;
            padding: 0px 10px;
            font-size: 22px;
            color: #d1d1d1;
        }

        /* 移动端二级菜单默认隐藏 */
        #menuSecond{
            display: none;
            }
            #menuSecond li{
                height: 60px;
                line-height: 60px;
                font-size: 14px;
                color: #FFFFFF80;
                 list-style-type: none;
        }
        #menuSecond li:hover{
            color: white;
        }
        .SearchCart {
            display: flex;
        }

        .cart {
            margin-left: auto;
            display: flex;
            align-items: center;
            position: relative;
        }

        .cart-icon {
            font-size: 24px;
            margin-right: 5px;
            cursor: pointer;
        }

        /* 购物车小红点 */
        .cart-badge {
            background-color: red;
            color: white;
            padding: 4px 8px;
            border-radius: 50%;
            position: absolute;
            top: -8px;
            right: -8px;
            font-size: 14px;
        }

        /* 购物车内容展示 */
        #cartContent {
            position: absolute;
            top: 30px;
            right: 0;
            background-color: deeppink;
            border: 1px solid #ccc;
            padding: 10px;
            display: none;
            width: 280px;
            max-width: 500px;
            overflow-y: auto;
        }

        /* PC端样式 */
        @media screen and (min-width: 1025px) {

            .nav-icon {
                display: none;
            }

            .navigation {
                flex-grow: 1;
                display: flex;
                justify-content: flex-start;
                /* 最左侧导航栏 */
            }

            /* 在 PC 端中心对齐 logo */
            .logo {

                flex-grow: 12;
                display: flex;
                justify-content: center;
                /* 最左侧导航栏 */
            }
        }

        /* 平板端样式 */
        @media screen and (max-width: 1024px) {

            /* 第一行 */
            .nav-icon,
            .navigation {
                display: none;
            }

            .header {
                flex-direction: row;
                /* 横向排列 */
                justify-content: space-between;
                /* 水平分散对齐 */
            }

            /* 第二行（导航栏） */
            /* 居中对齐 */
            .header2 {
                display: block;
                display: flex;
                justify-content: center;
            }

            /* 在平板端中心对齐 logo */
            .logo {
                flex-grow: 1;
                display: flex;
                justify-content: center;
                /* 最左侧导航栏 */
            }
        }

        /* 移动端样式 */
        @media screen and (max-width: 768px) {

            .navigation,
            .search,
            .header2 {
                display: none;
            }

            .header {
                flex-direction: row;
                justify-content: space-between;
            }

            .lg {
                width: 70px;
                height: 60px;
            }

            /* 移动端导航图标 */
            .nav-icon {
                display: block;
                font-size: 24px;
                cursor: pointer;
            }

            .mobile-nav {
                display: block;
            }
        }
</style>

原生写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>适配页面示例</title>
    <style lang="scss">
        /* 基本样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 共享头部样式 */
        .header {
            background-color: #1c1b1b;
            color: white;
            padding: 10px;
            display: flex;
            align-items: center;
        }

        .header2 {
            width: auto;
            background-color: #1c1b1b;
            color: white;
            padding: 10px;
            display: flex;
            align-items: center;
            margin: 0 auto;
            display: none;
        }

        .navigation a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
        }

        .navigat a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
        }


        .logo {
            width: auto;
            /* 将宽度设置为自动 */
            height: 85px;
            /* 使其水平居中 */
            display: block;

            /* 添加此行 */
            .lg {

                margin: 0 auto;
            }
        }

        /* 移动端nav */
        .mobile-nav {
            display: none;
            position: fixed;
            top: 0;
            left: -100%;
            /* Initially hidden off the left side of the viewport */
            width: 60%;
            /* Adjust the width as needed */
            height: 100%;
            background-color: #1c1b1b;
            color: white;
            z-index: 2;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: left 0.3s ease-in-out;
            /* Add smooth transition */
            padding-left: 18px;
            padding-right: 24px;


        }

        .mobaleC {
            display: block;
            height: 60px;

        }

        .mobileClose {
            width: 20%;
            margin-left: -30px;
        }

        .mobile-nav a {
            display: block;
            color: white;
            text-decoration: none;
            position: relative;
            width: 100%;
            padding: 20px 0;
            text-align: left;
            cursor: pointer;
            border-bottom: 1px solid #818181;
        }

        .mobile-nav a span {
            float: right;
            padding: 0px 10px;
            font-size: 22px;
            color: #d1d1d1;
        }

        /* 移动端二级菜单默认隐藏 */
        #menuSecond{
            display: none;
            }
            #menuSecond li{
                height: 60px;
                line-height: 60px;
                font-size: 14px;
                color: #FFFFFF80;
                 list-style-type: none;
        }
        #menuSecond li:hover{
            color: white;
        }
        .SearchCart {
            display: flex;
        }

        .cart {
            margin-left: auto;
            display: flex;
            align-items: center;
            position: relative;
        }

        .cart-icon {
            font-size: 24px;
            margin-right: 5px;
            cursor: pointer;
        }

        /* 购物车小红点 */
        .cart-badge {
            background-color: red;
            color: white;
            padding: 4px 8px;
            border-radius: 50%;
            position: absolute;
            top: -8px;
            right: -8px;
            font-size: 14px;
        }

        /* 购物车内容展示 */
        #cartContent {
            position: absolute;
            top: 30px;
            right: 0;
            background-color: deeppink;
            border: 1px solid #ccc;
            padding: 10px;
            display: none;
            width: 280px;
            max-width: 500px;
            overflow-y: auto;
        }

        /* PC端样式 */
        @media screen and (min-width: 1025px) {

            .nav-icon {
                display: none;
            }

            .navigation {
                flex-grow: 1;
                display: flex;
                justify-content: flex-start;
                /* 最左侧导航栏 */
            }

            /* 在 PC 端中心对齐 logo */
            .logo {

                flex-grow: 12;
                display: flex;
                justify-content: center;
                /* 最左侧导航栏 */
            }
        }

        /* 平板端样式 */
        @media screen and (max-width: 1024px) {

            /* 第一行 */
            .nav-icon,
            .navigation {
                display: none;
            }

            .header {
                flex-direction: row;
                /* 横向排列 */
                justify-content: space-between;
                /* 水平分散对齐 */
            }

            /* 第二行（导航栏） */
            /* 居中对齐 */
            .header2 {
                display: block;
                display: flex;
                justify-content: center;
            }

            /* 在平板端中心对齐 logo */
            .logo {
                flex-grow: 1;
                display: flex;
                justify-content: center;
                /* 最左侧导航栏 */
            }
        }

        /* 移动端样式 */
        @media screen and (max-width: 768px) {

            .navigation,
            .search,
            .header2 {
                display: none;
            }

            .header {
                flex-direction: row;
                justify-content: space-between;
            }

            .lg {
                width: 70px;
                height: 60px;
            }

            /* 移动端导航图标 */
            .nav-icon {
                display: block;
                font-size: 24px;
                cursor: pointer;
            }

            .mobile-nav {
                display: block;
            }
        }
    </style>
</head>

<body>

    <div class="header">
        <!-- 导航栏（PC端） -->
        <div class="navigation">
            <a href="#">首页</a>
            <a href="#">产品</a>
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
        </div>
        <!-- 移动端导航图标 -->
        <div class="nav-icon" onclick="toggleMobileNav()">&#9776;</div>
        <!-- Logo（共享） -->
        <div class="logo">
            <img src="../little.com/images/logo.jpg" alt="Logo" class="lg">
        </div>
        <!-- 搜索和购物车（共享） -->
        <div class="SearchCart">
            <input type="text" placeholder="搜索" class="search" id="search">
            <div class="cart" onmouseover="showCartContent()" onmouseout="hideCartContent()"
                onclick="toggleCartContent()">
                <span class="cart-icon">&#128722;</span>
                <span class="cart-badge" id="cartBadge">0</span>
                <div class="cart-content" id="cartContent">

                </div>
            </div>
        </div>
    </div>
    <div class="header2">
        <div class="navigat">
            <a href="#">首页</a>
            <a href="#">产品</a>
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
        </div>
    </div>
    <div class="mobile-nav" id="mobileNav">
        <div class="mobaleC">
            <img src="../323/closeBtnPic.svg" alt="" class="mobileClose" id="mobileClose" onclick="mobileCloseBtnFn()">
        </div>
        <a href="#">首页</a>
        <a href="#" onclick="menuSecondshowFn()">产品 <span class="Collapsible__Plus" id="Collapsible__Plus">+</span></a>
        <ul class="menuSecond" id="menuSecond">
            <li>TOOLS</li>
            <li>LEATHER</li>
            <li>CRAETING SUPPLIES</li>
            <li>ACRYLIC TEMPLATES</li>
            <li>DOWNLOADABLE DIGITAL PATTERNS</li>
        </ul>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
    </div>

    <script>
        var mobileNav = document.getElementById('mobileNav');
        var menuSecond = document.getElementById('menuSecond');//移动端二级菜单点击
        var menuPlus = document.getElementById('Collapsible__Plus');//移动端+号变化
        function toggleMobileNav() {

            if (mobileNav.style.left === '-100%' || mobileNav.style.left === '') {
                mobileNav.style.left = '0';
            } else {
                mobileNav.style.left = '-100%';
            }
        }
        function mobileCloseBtnFn() {
            mobileNav.style.left = '-100%';
        }
        function showCartContent() {
            cartContent.style.display = "block";
        }
        function hideCartContent() {
            cartContent.style.display = "none";
        }
        function menuSecondshowFn() {
            if (menuSecond.style.display === 'none' || menuSecond.style.display === '') {
                menuSecond.style.display = 'block';
                menuPlus.textContent = '-';
            } else {
                menuSecond.style.display = 'none';
                menuPlus.textContent = '+';
            }
        }
    </script>

</body>

</html>

页面展示

河北蓝翔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于 vue3.x适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发
01-01
基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。 由于 Vue3 不再支持 IE11，...
pc和移动vue2配置
06-06
pc和移动vue2配置
Vue-PC-Template：构建高效、优雅的桌面应用起点
最新发布
gitblog_00088的博客
04-01 286
Vue-PC-Template：构建高效、优雅的桌面应用起点 项目地址:https://gitcode.com/PLQin/vue-pc-template 项目简介 Vue-PC-Template 是一个基于 Vue.js 框架的全面预配置的前端项目模板，特别针对构建桌面端应用程序设计。它整合了 Vue CLI、Vuex 状态管理库、Vue Router 路由器和 Element UI 组件库，提...
【PC端聊天功能模板】vue-elementul简单实现电脑端客服聊天功能，pc端聊天系统静态页面布局，配套websocket方案和心跳重连机制【详细注释，拿来即用】
seeeeeeeeeee的博客
08-11 1万+
这里是给大家写了一个简单的模板来使用，可以直接复制了调调就能用。因为这个聊天也是很容易出现的功能，所以我写一个模板静态页面放在这，以后需要这个功能的时候可以不用布局了，直接复制改改。我的代码里面有详细的注释，相信就算是刚学完前端的萌新也是看得懂的，如果有不懂得可以提问1，页面布局自适应缩放2，点击在线可以切换客服状态，忙碌，离线，退出登录等3，模糊搜索用户列表功能4，点击用户会变底色并切换用户的聊天信息5，刚进入时不点击选中用户时隐藏发送按钮和禁用输入框。......
html简单组件（一）：最简单的右侧导航栏
一方通行的博客
12-29 1万+
html+jquery+CSS实现最简单的右侧导航栏效果 一直在百度上没找到最简单实现右侧导航栏效果的代码，索性自己做一个最简单的demo 最简单的效果图 废话不多说，直接上代码 html+jquery代码 html主代码 <div class="mobile-nav"> <ul> <li class="nav_menu"><a onclick="change(1)">首页</a></li> <li cla
jquery mobile 的navbar自定义图标
weixin_34353714的博客
07-25 128
css：   &lt;style type="text/css"&gt;   .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }   .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!...
vue pc商城---最终篇
每天都要努力学习哦~~
07-05 1509
目录路由导航守卫简介2.全局守卫3.路由独享守卫（beforeEnter）4.组件内的守卫（3个）（1）beforeRouteEnter（2）beforeRouteUpdate（3）beforeRouteLeaveVue - 自定义插件一、使用插件二、开发插件三、开发实例 vue自定义指令使用全局自定义指令局部自定义指令自定义组件的钩子函数三、自定义组件的应用场景二、 vue自定义指令的应用场景vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 每个守卫接受三个参数： （1）to:即将
vue实现PC端分辨率适配操作
10-15
主要介绍了vue实现PC端分辨率适配操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
pc与移动端端适配网页模板
02-15
基于pc与移动端完美适配模板解决方案，对于前端新手来说稍加改动就可完成建站
vuedemo_vue和安卓原生交互_vue_源码
10-02
vue前端和安卓原生交互传递数据，js和原生webview交互
一套偏PC端的混合vue20模板
08-10
一套偏PC端的混合vue2.0模板 抽取vue-cli webpack完整版 去掉eslint, test 去其精华 取其糠糟
vue-pc-tp:vue pc 端模板
05-29
vue-norson-lis 一个 Vue.js 项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 有关工作原理的详细说明，请查看的和。
PC端完整版商城模板在线商城静态页面
06-11
PC端完整版商城模板在线商城静态页面。包括首页、详情页、列表页、个人中心页等五十多个页面
vue20多页面应用模板
08-12
vue2.0 多页面应用模板
vue漂亮的企业网站模板
热门推荐
weixin_44253369的博客
05-14 4万+
vue漂亮的企业网站模板 公司最近更新一版网站，换成vue做的，静态模板，没有后台，pc端已经自适用手机端，宣传够用了，废话少说，直接上图，拿去.qq:568149471 部署步骤 前期安装nodejs，vue 执行 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install cnpm run dev 如果部署服务器出现404错误，修改 处理vue部署404错误 server { listen 80; server_
vue+antd搭建后台管理界面模版（PC端），适配中文、英文、日文 mock数据，开箱即用
Python代码大全
12-23 2348
vue2 + vuex + vue-router + webpack + ES6/7 + axios + antd + 阿里图标iconfont。如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍。或者您可以 “follow” 一下，我会不断开源更多的有趣的项目。为了方便后期修改使用，模拟数据在页面中，具体修改看下面【强调】开发环境 w7 Chrome 61。
推荐6个实用的Vue模板
m0_45407251的博客
07-27 1万+
推荐6个实用的Vue模板
Vue后台管理系统模板推荐
唐先森的博客
03-11 2万+
vue后台管理系统模板推荐，vue2 Vue.js 是一个目前比较流行的前端框架，已经到了前端人人都会的地步，今天这里为大家罗列一下基于 Vue 的后端管理的框架。目前比较流行和 Vue 搭配的 UI组件 有Element-UI、iview、Bootstrap-Vue、Ant-Design-Vue，另外还有Vuetify、Buefy （Bulma css）、Vue Material 等等。基于这些组件库封装的后台管理模板，推荐一些常用 VUE后台模板 ......
vue响应式布局适配pc和移动
09-18
Vue的响应式布局可以很好地适配PC和移动设备，提供了灵活和便捷的方式来处理不同屏幕大小和设备类型的布局需求。 首先，Vue提供了针对不同屏幕大小的组件和样式处理的解决方案。通过使用Vue的动态绑定和条件渲染，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值