近年、Vue としても知られる Vue.js は、最も人気のあるフロントエンド フレームワークの 1 つとなり、そのシンプルさ、使いやすさ、強力なビュー制御機能が高く評価されています。同時に、Mac デバイスの人気に伴い、多くの Web サイト デザイナーが Mac デバイスのページ デザイン効果を模倣したいと考えています。この記事では、Vueを使ってMacBook風のページデザインを実現する方法を紹介します。
ステップ 1: 基本的なビュー構造とスタイルを構築する
MacBook のようなページ デザインを実現するには、最初に基本的なビュー構造とスタイルを構築する必要があります。 Vue CLI 3 ツールを使用すると、Vue ベースのプロジェクトをすばやく作成できます。 Vue CLI 3 では、コマンド ラインを使用してプロジェクト構造を作成し、開発サーバーを実行できます。プロジェクトの作成プロセスは次のとおりです:
$npm install -g @vue/cli
$vue create my-mac-app
$cd my-mac-app $npm run serve
プロジェクトが作成されたら、次のコードを /src/App.vue ファイルに追加できます:
<template>
<div class="macbook">
<div class="screen">
<!--在此处添加页面内容-->
</div>
<div class="keyboard">
<!--在此处添加键盘-->
</div>
<div class="trackpad"></div>
</div>
</template>
<style>
.macbook {
width: 600px;
height: 400px;
position: relative;
background-color: #d9d9d9;
border-radius: 10px;
overflow: hidden;
box-shadow: 5px 5px 20px #555;
}
.screen {
width: 80%;
height: 60%;
background-color: white;
position: absolute;
top: 10%;
left: 10%;
border-radius: 5px;
overflow: hidden;
box-shadow: inset 0 0 15px #333;
}
.keyboard {
width: 80%;
height: 20%;
position: absolute;
bottom: 10%;
left: 10%;
background-color: #b3b3b3;
border-radius: 5px;
box-shadow: inset 3px 1px 5px rgba(0, 0, 0, 0.3);
}
.trackpad {
width: 30px;
height: 40px;
position: absolute;
bottom: 13%;
left: 55%;
background-color: #b3b3b3;
border-radius: 50%;
box-shadow: inset -3px -1px 5px rgba(0, 0, 0, 0.3);
}
</style>上記のコードは、Mac デバイス ページの基本的な外観構造とスタイルを提供します。次に、画面領域とキーボード領域にコンテンツを追加します。
#ステップ 2: 画面領域のコンテンツを追加する#画面領域では、次のコンテンツを追加できます:
アプリケーション アイコン ファイルに次のコードを追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><div class="screen">
<div class="app-icons">
<div class="icon">
<img src="./assets/icons/chrome.png" alt="谷歌浏览器" />
<span>Chrome</span>
</div>
<div class="icon">
<img src="./assets/icons/safari.png" alt="Safari 浏览器" />
<span>Safari</span>
</div>
<div class="icon">
<img src="./assets/icons/word.png" alt="Microsoft Word" />
<span>Microsoft Word</span>
</div>
<div class="icon">
<img src="./assets/icons/powerpoint.png" alt="Microsoft PowerPoint" />
<span>Microsoft PowerPoint</span>
</div>
<div class="icon">
<img src="./assets/icons/excel.png" alt="Microsoft Excel" />
<span>Microsoft Excel</span>
</div>
</div>
</div>
<style>
.app-icons {
display: flex;
justify-content: center;
align-items: center;
height: 10%;
padding: 10px;
}
.icon {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
cursor: pointer;
}
.icon img {
width: 50px;
height: 50px;
}
.icon span {
font-size: 12px;
white-space: nowrap;
}
</style></pre><div class="contentsignin">ログイン後にコピー</div></div>
ファイルに追加できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><div class="screen">
<div class="app-icons"></div>
<div class="app-windows">
<div class="window">
<div class="title-bar">
<div class="title">蜂巢布局</div>
<div class="controls">
<div class="control"></div>
<div class="control"></div>
<div class="control"></div>
</div>
</div>
<iframe
src="https://vuebeijing.github.io/2019-08-27-codex-in-flames-layout-explained-by-finished-product/"
frameborder="0"
width="100%"
height="100%"
allowfullscreen
></iframe>
</div>
<div class="window">
<div class="title-bar">
<div class="title">Vue CLI 3</div>
<div class="controls">
<div class="control"></div>
<div class="control"></div>
<div class="control"></div>
</div>
</div>
<iframe
src="https://www.npmjs.com/package/@vue/cli"
frameborder="0"
width="100%"
height="100%"
allowfullscreen
></iframe>
</div>
</div>
</div>
<style>
.app-windows {
width: 100%;
height: 90%;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.window {
width: 40%;
height: 350px;
margin: 20px;
border-radius: 5px;
box-shadow: 3px 3px 10px #333;
overflow: hidden;
}
.title-bar {
display: flex;
justify-content: space-between;
align-items: center;
height: 30px;
background-color: #d9d9d9;
padding: 10px;
}
.title {
font-size: 16px;
font-weight: bold;
color: #333;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
width: 70px;
}
.control {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
background-color: #333;
}
.control:last-child {
margin-right: 0;
}
</style></pre><div class="contentsignin">ログイン後にコピー</div></div> 上記のコードは、それぞれに Web ページがインラインで含まれる 2 つのウィンドウを含む単純なウィンドウ アプリケーションを作成します。
ステップ 3: キーボード領域を改善する
キーボード領域はシミュレートされています。キーボードに多くの機能を追加する必要はなく、入力ボックスのみが必要です。次のコードを
App.vue ファイルに追加できます: 概要 Vue.js は、さまざまな複雑な動的ページを簡単に作成できる強力なビュー コントロール機能を提供します。この記事では、Vue を使用して MacBook のようなページ デザインを実現する方法を紹介し、いくつかの一般的な Vue テクノロジとテクニックを示します。柔軟で強力なフロントエンド開発フレームワークを探している場合、Vue.js は間違いなく試してみる価値のあるオプションです。 以上がVue を使用して MacBook のようなページ デザインを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。<div class="keyboard">
<div class="input-box">
<input type="text" placeholder="开始搜索" />
<span class="search-icon"></span>
</div>
</div>
<style>
.keyboard {
width: 80%;
height: 20%;
position: absolute;
bottom: 10%;
left: 10%;
background-color: #b3b3b3;
border-radius: 5px;
box-shadow: inset 3px 1px 5px rgba(0, 0, 0, 0.3);
}
.input-box {
width: 90%;
height: 60%;
padding: 10px;
box-sizing: border-box;
background-color: white;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
input[type="text"] {
width: 90%;
height: 100%;
padding: 0;
border: none;
outline: none;
font-size: 16px;
}
.search-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #b3b3b3;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
</style>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
